我想用 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/mdbootstrap/perfect-scrollbar
https://github.com/Grsmto/simplebar
https://github.com/vitch/jScrollPane
Firefox 64 添加了对规范草案 CSS Scrollbars Module Level 1 的支持,它添加了 scrollbar-width
和 scrollbar-color
的 two new properties,从而可以控制滚动条的显示方式。
您可以将 scrollbar-color
设置为以下值之一(来自 MDN 的描述):
auto 滚动条轨道部分的默认平台渲染,没有任何其他相关的滚动条颜色属性。
以前的规范包括 dark
和 light
值什么 were not implemented in Firefox。这些值已从规范中删除。
在带有移动 Firefox 的库存 Android 上,拇指可以着色,但没有着色的轨迹。
此外,在 99.0 之前的 macOS Firefox 版本中,这些规则无法设置 macOS 默认的自动隐藏半透明滚动条的样式。从 Firefox 99.0 开始,所有 macOS 滚动条模式(在 System Preferences > Show Scroll Bars 下配置)都可以着色。
视觉演示:
.scroll { 宽度:20%;高度:100px;边框:1px 纯灰色;溢出:滚动;显示:内联块; } .scroll-color-auto { 滚动条颜色:自动; } .scroll-color-colors { 滚动条颜色:橙色浅黄色; }
auto
auto
auto
auto
auto
auto
颜色
颜色
颜色< /p>
颜色
颜色
颜色
您可以将 scrollbar-width
设置为以下值之一(来自 MDN 的描述):
auto 平台的默认滚动条宽度。
薄 提供该选项的平台上的薄滚动条宽度变体,或者比默认平台滚动条宽度更薄的滚动条。
none 不显示滚动条,但该元素仍可滚动。
您还可以根据规范设置特定的长度值。 thin
和特定长度可能不会在所有平台上执行任何操作,并且它的确切作用是特定于平台的。特别是,Firefox 目前似乎不支持特定的长度值 (this comment on their bug tracker seems to confirm this)。但是,thin
键似乎得到了很好的支持,至少支持 macOS 和 Windows。
在带有移动 Firefox 的库存 Android 上,auto
宽度拇指已经相当薄,而 thin
并没有使它变薄。
可能值得注意的是,长度值选项和整个 scrollbar-width
属性正在考虑在未来的草稿中删除,如果发生这种情况,这个特定的属性可能会在未来的版本中从 Firefox 中删除。
视觉演示:
.scroll { 宽度:30%;高度:100px;边框:1px 纯灰色;溢出:滚动;显示:内联块; } .scroll-width-auto { 滚动条宽度:自动; } .scroll-width-thin { 滚动条宽度:薄; } .scroll-width-none { 滚动条宽度:无; }
auto
auto
auto
auto
auto
auto
thin
thin
thin< /p>
thin
thin
thin
none p>
无
无
无
无
无
由于 Firefox 64,可以将 new specs 用于简单的滚动条样式(不像 Chrome 中的供应商前缀那么完整)。
在 this example 中可以看到一个解决方案,它结合了不同的规则来解决 Firefox 和 Chrome 的问题,最终结果相似(不相等)(例如使用您的原始 Chrome 规则):
关键规则是:
对于火狐
.scroller {
overflow-y: scroll;
scrollbar-color: #0A4C95 #C2D2E4;
}
对于铬
.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;
我可以提供替代方案吗?
没有任何脚本,只有标准化的 CSS 样式和一点点创造力。简短的回答 - 屏蔽现有浏览器滚动条的一部分,这意味着您保留它的所有功能。
.scroll_content {
position: relative;
width: 400px;
height: 414px;
top: -17px;
padding: 20px 10px 20px 10px;
overflow-y: auto;
}
有关演示和更深入的解释,请查看此处...
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
我想我会分享我的发现,以防有人考虑使用 jQuery 插件来完成这项工作。
我试了一下jQuery Custom Scrollbar。它非常漂亮,并且可以进行一些平滑的滚动(具有滚动惯性),并且有很多可以调整的参数,但它最终对我来说有点过于 CPU 密集型(并且它给 DOM 增加了相当多的数量)。
现在我试一试Perfect Scrollbar。它简单轻巧(6 KB),到目前为止做得不错。它根本不是 CPU 密集型的(据我所知),并且对您的 DOM 增加的很少。它只有几个参数需要调整(wheelSpeed 和 wheelPropagation),但这就是我所需要的,它可以很好地处理滚动内容的更新(例如加载图像)。
PS 我确实快速浏览了 JScrollPane,但@simone 是对的,它现在有点过时了,而且是 PITA。
到 2021 年为止,Firefox 滚动条自定义只有两个可用的属性; scrollbar-color
和 scrollbar width
。
scrollbar-color: red yellow; /* track thumb */
scrollbar-width: 5px; /* none, thin, or auto */
.demo { 溢出-y:滚动; } .demo { 滚动条颜色:红黄;滚动条宽度:10px; }
一些滚动文本...
你不敢滚动到底部...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
还在吗?公平警告,不要向下滚动!
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本.. .
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...< br>
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
停止!
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
现在我疯了
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
那就是通常是一个坏主意
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本.. .
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...< br>
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本.. .
一些滚动文本...
一些滚动文本...
再见
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些 scro ll 文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本.. .
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...< br>
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本.. .
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本.. .
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...< br>
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本ext...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
最后最后最后一个警告;你不会喜欢底部的内容
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本.. .
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...< br>
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...< br>
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本.. .
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...< br>
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
底部什么都没有!
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
som e 滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本.. .
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...< br>
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本t...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些sc滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本.. .
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...< br>
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本.. .
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
< br> 一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本。 ..
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
一些滚动文本...
NOTHING >:D
HTML
<div class="demo">
CSS
.demo {
overflow-y: scroll;
}
.demo {
scrollbar-color: red yellow;
scrollbar-width: 5px;
}
scrollbar-width
仅支持 3 个值:none
、thin
和 auto
- developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
在这里,我已经为所有主要浏览器尝试了这个 CSS 并进行了测试:自定义颜色在滚动条上运行良好。
是的,不同浏览器的多个版本存在限制。
/* 仅限 Chrome */ html::-webkit-scrollbar {width: 17px;} html::-webkit-scrollbar-thumb {background-color: #0064a7;背景剪辑:填充框;边框:1px 实心 #8ea5b5;} html::-webkit-scrollbar-track {背景颜色:#8ea5b5; } ::-webkit-scrollbar-button {background-color: #8ea5b5;} /* 仅 IE */ html {scrollbar-face-color: #0064a7;滚动条阴影颜色:#8ea5b5; scrollbar-highlight-color: #8ea5b5;} /* 仅 FireFox */ html {scrollbar-color: #0064a7 #8ea5b5;} /* 查看滚动条 */ html {overflow-y: scroll;overflow-x: hidden;} < !doctype html>
2022 年
使用最新的 Firefox 和 Chrome 版本进行测试
下面的代码片段将在 Chrome 和 Firefox 上显示相同的滚动条样式,试试看。
html { /* 对于 Firefox */ overflow-y: scroll;滚动条颜色:#008de4 #0d3b97;滚动条宽度:薄; } /* 对于 Chrome 和除 Firefox 之外的其他浏览器 */ body::-webkit-scrollbar { width: 0.5em;背景颜色:#0d3b97; } body::-webkit-scrollbar-thumb { 背景颜色:#008de4; }
您还可以使用以下方法自定义滚动条轨道(但不适用于 Firefox)
::-webkit-scrollbar-track
Firefox 仅接受:
scrollbar-color: #F8F8F8 // Add your color
scroll-bar-width: thin/auto/none
2021
火狐
.nav{
scrollbar-width: 0px;
scrollbar-width: none;}
铬合金
::-webkit-scrollbar {
height: 0; /* Remove scrollbar space */
background: transparent;
/* Optional: just make scrollbar invisible */
}
用于垂直和水平滚动条更改宽度或高度属性
它以用户风格工作,但似乎不适用于网页。我还没有找到 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/。
简短的回答:
仅以下作品
在 Firefox 中(截至 2022 年 1 月):
:
属性(不是伪元素!) 允许值 scrollbar-width thin (实际上很薄) auto (标准厚版本) none (隐藏滚动条) scrollbar-color color 颜色
:
您必须设置两个颜色值,第一个滚动条 thumb ,第二个滚动条背景。它采用任何正常的颜色值,使用“黑色”之类的名称、“#000000”之类的十六进制值、“rgb(0,0,0) 之类的函数以及“var(--previouslydefinedblack)”之类的变量。但它不将线性梯度作为输入,通常也不通过 css 变量。顺便说一下,属性的顺序并不重要。
这适用于 Wordpress Guys 自定义 CSS
/* Fire-Fox Scrollbar */
:root{
scrollbar-face-color: rgb(176, 88, 54); /* Firefox 63 compatibility */
scrollbar-track-color: rgb(51, 62, 72); /* Firefox 63 compatibility */
scrollbar-color: rgb(176, 88, 54) rgb(51, 62, 72);
scrollbar-width: auto;
}
参考:https://github.com/Aris-t2/CustomCSSforFx/issues/160
.mat-tab-header {
overflow-x: scroll !important;
// For Firefox
scrollbar-color: transparent transparent;
border-bottom: none;
}
.mat-tab-header::-webkit-scrollbar { // TO Remove horizontal scrollbar in tabs
display: none !important;
}
不定期副业成功案例分享
-moz-appearance
的所有可能值都无济于事。"The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme."
- 你只会得到一个原生滚动条。