我如何通过CSS(层叠样式表)为一个div而不是整个页面自定义滚动条?
当前回答
对于使用sass的人来说，这里是一个具有基本功能(拇指，轨道颜色和宽度)的mixin。我没有广泛地测试它，所以请随意指出任何错误。
@mixin element-scrollbar($thumb-color, $background-color: mix($thumb-color, white, 50%), $width: 1rem) {
// For Webkit
&::-webkit-scrollbar-thumb {
background: $thumb-color;
}
&::-webkit-scrollbar-track {
background: $background-color;
}
&::-webkit-scrollbar {
width: $width;
height: $width;
}
// For Internet Explorer
& {
scrollbar-face-color: $thumb-color;
scrollbar-arrow-color: $thumb-color;
scrollbar-track-color: $background-color;
}
// For Firefox future compatibility
// This is W3C draft and does not work yet. Use html-firefox-scrollbar mixin instead.
& {
scrollbar-color: $thumb-color $background-color;
scrollbar-width: $width;
}
}
// For Firefox
@mixin html-firefox-scrollbar($thumb-color, $background-color: mix($thumb-color, white, 50%), $firefox-width: this) {
// This must be used on html/:root element to take effect
& {
scrollbar-color: $thumb-color $background-color;
scrollbar-width: $firefox-width;
}
}
其他回答
自定义滚动条无法使用CSS，您需要一些JavaScript魔法。
有些浏览器支持非规范的CSS规则，比如Webkit中的::-webkit-scrollbar，但这并不理想，因为它只能在Webkit中工作。IE也有类似的东西，但我认为他们不再支持它了。
请检查这个链接。带有工作演示的示例
#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
CSS滚动条
我认为你必须对所有的滚动条使用::-wekbit-scrollbar，你可以使用:
<style>
.mydiv {
height:100px;
overflow:auto;
}
/* width */
.mydiv::-webkit-scrollbar {
width: 20px;
}
/* Track */
.mydiv::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
.mydiv::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
/* Handle on hover */
.mydiv::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
</style>
<body>
<div class="mydiv"> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </div>
</body>
我认为整合滚动条、CSS和浏览器兼容性方面的最新信息会很有帮助。
CSS支持滚动条
目前，还不存在跨浏览器滚动条CSS样式定义。我在最后提到的W3C文章有以下声明，最近更新了(2014年10月10日):
一些浏览器(IE, Konqueror)支持'scrollbar-shadow-color'， 'scrollbar-track-color'等非标准属性。这些属性是非法的:它们既没有在任何CSS规范中定义，也没有被标记为专有属性(通过在它们前面加上“-vendor-”)。
微软
正如其他人提到的，微软支持滚动条样式，但仅限于IE8及以上版本。
例子:
.TA {
scrollbar-3dlight-color:gold;
scrollbar-arrow-color:blue;
scrollbar-base-color:;
scrollbar-darkshadow-color:blue;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:
}
Chrome & Safari (WebKit)
同样，WebKit现在也有了自己的版本:
Styling scrollbars: https://www.webkit.org/blog/363/styling-scrollbars/ Demo of all WebKit scroll bar styling From Custom scrollbars in WebKit, relevant CSS: /* pseudo elements */ ::-webkit-scrollbar { } ::-webkit-scrollbar-button { } ::-webkit-scrollbar-track { } ::-webkit-scrollbar-track-piece { } ::-webkit-scrollbar-thumb { } ::-webkit-scrollbar-corner { } ::-webkit-resizer { } /* pseudo class selectors */ :horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive
Firefox(壁虎)
从版本64开始，Firefox通过属性scrollbar-color(部分，W3C草案)和scrollbar-width (W3C草案)支持滚动条样式化。在这个答案中可以找到一些关于实现的有用信息。
跨浏览器滚动条样式
JavaScript库和插件可以提供跨浏览器的解决方案。有很多选择。
20 jQuery滚动条插件示例(2012年7月24日) NiceScroll: jQuery滚动插件桌面，移动和触摸设备 jQuery自定义内容滚动 一个轻量级的jQuery插件 等。 30+ JavaScript/Ajax技术用于滑块，滚动条和滚动条(2008年5月7日) 21实用的滚动条CSS/JavaScript样式教程(2012年8月) 15+免费和高级jQuery滚动插件(2012年8月26日)
这样的例子不胜枚举。最好的办法是到处搜索、研究和测试可用的解决方案。我相信你一定能找到符合你需要的工作。
防止非法滚动条样式
为了防止滚动条样式没有正确地加上前缀“-vendor”，W3C的这篇文章提供了一些基本说明。基本上，您需要将以下CSS添加到与浏览器关联的用户样式表中。这些定义将覆盖您访问的任何页面上无效的滚动条样式。
body, html {
scrollbar-face-color: ThreeDFace !important;
scrollbar-shadow-color: ThreeDDarkShadow !important;
scrollbar-highlight-color: ThreeDHighlight !important;
scrollbar-3dlight-color: ThreeDLightShadow !important;
scrollbar-darkshadow-color: ThreeDDarkShadow !important;
scrollbar-track-color: Scrollbar !important;
scrollbar-arrow-color: ButtonText !important;
}
重复或相似的问题/上面没有链接的来源
改变滚动条的样式 CSS滚动条样式跨浏览器 如何在div上创建自定义滚动条(Facebook风格)
注意:这个答案包含了不同来源的信息。如果使用了一个源，那么它也会在这个答案中被链接。
在Firefox +64中只使用CSS
.mycoldiv{
scrollbar-color: white rebeccapurple;
scrollbar-width: thin;
display: block;
height:400px;
overflow-x: auto;
}
更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
推荐文章
- 如何在表中删除行和列之间不需要的空间?
- 如何清除所有<div>的内容在一个父<div>?
- HTML的“nonce”属性用于脚本和样式元素的目的是什么?
- 我如何在HTML中创建一个泪滴?
- 在另一个js文件中调用JavaScript函数
- 我怎么能强迫一个长字符串没有任何空白被包装?
- 在哪里放置JavaScript在HTML文件?
- 如何在引导栏中居中内容?
- IE8问题推特引导3
- 是否有可能使一个div 50px小于100%在CSS3?
- 为什么CSS选择器/ HTML属性首选破折号?
- CSS选择器-具有给定子元素的元素
- 如何在标题属性中转义双引号
- 在不使用LESS的情况下更改引导导航栏折叠断点
- Safari和Chrome桌面浏览器无法自动播放视频
