Firefox的自定义CSS滚动条

我想用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做到这一点。

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

截至2018年底，Firefox中现在提供有限的自定义功能！

查看以下答案：

• https://stackoverflow.com/a/54101063/405015
• https://stackoverflow.com/a/53739309/405015

这是背景信息：https : //bugzilla.mozilla.org/show_bug.cgi?id=1460109

没有Firefox ::-webkit-scrollbar和朋友等效。

您必须坚持使用JavaScript。

很多人都希望使用此功能，请参见：https : //bugzilla.mozilla.org/show_bug.cgi?id=77790

就JavaScript替代品而言，您可以尝试：

• https://github.com/noraesae/perfect-scrollbar
• https://github.com/jnicol/trackpad-scroll-emulator
• https://github.com/vitch/jScrollPane（但是它已经过时了，显然是PITA ...）

Firefox 64添加了对规范草案CSS滚动条模块级别1的支持，该模块添加了的两个新属性，scrollbar-width并且scrollbar-color可以对滚动条的显示方式进行一些控制。

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

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

请注意，Firefox当前未实现dark和light值。

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>

我可以提供替代方法吗？

没有脚本，只有标准化的CSS样式和一点点创造力。简短答案-隐藏现有浏览器滚动条的某些部分，这意味着您保留了所有功能。

.scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

有关演示和更深入的说明，请在此处检查...

jsfiddle.net/aj7bxtjz/1/

我以为我可以分享我的发现，以防有人考虑使用JQuery插件来完成这项工作。

我给了JQuery自定义滚动条。它非常漂亮，可以进行一些平滑的滚动（具有滚动惯性），并且可以调整许多参数，但是对我而言，这最终占用了CPU太多的资源（并且为DOM增加了很多）。

现在，我可以使用完美滚动条。它简单，轻巧（6KB），到目前为止，它做得不错。据我所知，它根本不占用CPU，并且对您的DOM几乎没有增加。它只有几个参数需要调整（wheelSpeed和wheelPropagation），但这只是我所需要的，它可以很好地处理滚动内容的更新（例如加载图像）。

PS我确实快速浏览过JScrollPane，但是@simone是正确的，现在有点过时了，还有PITA。

从Firefox 64开始，可以使用新的规范来实现简单的Scrollbar样式（不如带有供应商前缀的Chrome那样完整）。

在此示例中，可以看到一个解决方案，该解决方案结合了不同的规则以解决Firefox和Chrome的最终结果相似（不相等）的情况（例如，使用原始的Chrome规则）：

关键规则是：

对于Firefox

.scroller {
  overflow-y: scroll;
  scrollbar-color: #0A4C95 #C2D2E4;
}

对于Chrome

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

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

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

请注意，关于您的解决方案，可以使用以下更简单的Chrome规则：

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

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

最后，为了在Firefox中也隐藏滚动条中的箭头，当前必须使用以下规则将其设置为“ thin ”scrollbar-width: thin;

到2020年有效

/* Thin Scrollbar */
:root{
  scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
  scrollbar-width: thin !important;
}

https://github.com/Aris-t2/CustomCSSforFx/issues/160

它以用户风格工作，似乎不适用于网页。我还没有找到Mozilla的官方指示。尽管它可能在某些时候可行，但Firefox对此没有官方支持。该错误仍然开放https://bugzilla.mozilla.org/show_bug.cgi?id=77790

scrollbar {
/*  clear useragent default style*/
   -moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
   -moz-appearance: none !important;
}
/* the sliding part*/
thumb{
   -moz-appearance: none !important;
}
scrollcorner {
   -moz-appearance: none !important;
   resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
    color:silver;
}

有关详细信息，请访问http://codemug.com/html/custom-scrollbars-using-css/。

@-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
       -moz-appearance: none !important;
       background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
       -moz-appearance: none !important;
       background-color: rgb(0,0,255) !important;
    }

    thumb:hover,scrollbarbutton:hover {
       -moz-appearance: none !important;
       background-color: rgb(255,0,0) !important;
    }
    scrollbarbutton {
       display: none !important;
    }
    scrollbar[orient="vertical"] {
      min-width: 15px !important;
    }
}