Firefox的自定义CSS滚动条

Question

我想用CSS自定义滚动条。

我使用此WebKit CSS代码，该代码非常适合Safari和Chrome：

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

如何在Firefox中执行相同的操作？

我知道我可以使用jQuery轻松地做到这一点，但如果可行，我宁愿使用纯CSS做到这一点。

将不胜感激某人的专家意见！

Answer 1

Firefox 64添加了对规范草案CSS滚动条模块级别1的支持，该模块添加了的两个新属性，scrollbar-width并scrollbar-color提供了一些如何显示滚动条的控制。

您可以设置scrollbar-color为以下值之一（来自MDN的描述）：

• auto在没有其他任何相关滚动条颜色属性的情况下，滚动条的轨道部分的默认平台渲染。
• dark 显示深色滚动条，它可以是平台提供的深色滚动条，也可以是深色的自定义滚动条。
• light 显示一个浅滚动条，它可以是平台提供的滚动条的浅变体，也可以是具有浅色的自定义滚动条。
• <color> ``<color> 将第一种颜色应用于滚动条滑块，将第二种颜色应用于滚动条轨道。

macOS注意事项：

macOS默认的自动隐藏半透明滚动条无法使用此规则着色（它们仍然根据背景选择自己的对比色）。仅永久显示的滚动条（系统偏好设置>显示滚动条>始终）是彩色的。

视觉演示：

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-dark {
  scrollbar-color: dark;
}
.scroll-color-light {
  scrollbar-color: light;
}
.scroll-color-colors {
  scrollbar-color: orange lightyellow;
}

<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-color-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>

<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>

<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

您可以设置scrollbar-width为以下值之一（来自MDN的描述）：

• auto 平台的默认滚动条宽度。
• thin 提供该选项的平台上的滚动条宽度变薄，或者滚动条的宽度比默认平台宽度薄。
• none 没有显示滚动条，但是该元素仍然可以滚动。
  您还可以根据规格设置特定的长度值。两者thin和特定长度可能无法在所有平台上执行任何操作，而确切的作用是特定于平台的。特别是，Firefox当前似乎不支持特定的长度值（有关其错误跟踪器的评论似乎证实了这一点）。该thinkeywork确实出现了但是很好的支持，与-至少MacOS和Windows的支持。
  

可能值得注意的是，将scrollbar-width在将来的草案中考虑删除length值选项和整个属性，如果发生这种情况，则可以在将来的版本中从Firefox中删除此特定属性。

视觉演示：

.scroll {
  width: 30%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-width-auto {
  scrollbar-width: auto;
}
.scroll-width-thin {
  scrollbar-width: thin;
}
.scroll-width-none {
  scrollbar-width: none;
}

<div class="scroll scroll-width-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-width-thin">
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>

<div class="scroll scroll-width-none">
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>