适用于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

截至2018年底，Firefox现在提供的定制有限！

看到这些答案：

这是背景信息：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 ...）

Answer 2

我可以提供替代方案吗？

没有任何脚本，只有标准化的CSS风格和一点点创造力。简短回答 - 屏蔽现有浏览器滚动条的部分，这意味着您将保留其所有功能。

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

有关演示和更深入的解释，请点击此处...

jsfiddle.net/aj7bxtjz/1/

Answer 3

我想如果有人正在考虑使用JQuery插件来完成这项工作，我会分享我的发现。

我给了JQuery Custom Scrollbar一个去。它非常华丽，并且有一些平滑的滚动（滚动惯性）并且有大量的参数你可以调整，但它最终对我来说有点过于CPU（并且它为DOM增加了相当多的数量）。

现在我给Perfect Scrollbar一个去。它简单轻巧（6KB），到目前为止它做得不错。它根本不是CPU密集型的（据我所知）并且对DOM的贡献很少。它只有两个参数来调整（wheelSpeed和wheelPropagation），但它是我所需要的，它可以很好地处理滚动内容的更新（例如加载图像）。

附：我确实快速浏览了JScrollPane，但是@simone是对的，它现在有点过时和PITA了。

Answer 4

Firefox 64增加了对规范草案CSS Scrollbars Module Level 1的支持，它增加了two new properties和scrollbar-width的scrollbar-color，它可以控制滚动条的显示方式。

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

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

请注意，dark和light值are not currently implemented in Firefox。

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目前似乎不支持特定的长度值（this comment on their bug tracker seems to confirm this）。然而，thin关键字确实得到了很好的支持，至少有macOS和Windows支持。

值得注意的是，长度值选项和整个scrollbar-width属性正在考虑在将来的草稿中删除，如果发生这种情况，可能会在将来的版本中从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>

Answer 5

从Firefox 64开始，可以使用new specs进行简单的滚动条样式设置（不像Chrome中那样带有供应商前缀）。

在this example中可以看到一个解决方案，它结合了不同的规则来解决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中隐藏滚动条中的箭头，目前有必要将其设置为“瘦”，使用以下规则scrollbar-width: thin;

Answer 6

它以用户风格工作，似乎不适用于网页。我还没有找到Mozilla的官方指示。虽然它可能在某些时候起作用，但Firefox没有官方支持。这个bug仍然是开放的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/了解详情。

Answer 7

@-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;
    }
}

适用于Firefox的自定义CSS滚动条

问题描述投票：265回答：7

7个回答

最新问题

适用于Firefox的自定义CSS滚动条

问题描述 投票：265回答：7

7个回答

最新问题

问题描述投票：265回答：7