如何通过CSS(级联样式表)为一个div页面而不是整个页面自定义滚动条?
div
我认为整合有关滚动条,CSS和浏览器兼容性的最新信息会有所帮助。
滚动条CSS支持
当前,没有跨浏览器的滚动条CSS样式定义。最后,我在W3C文章中提到了以下内容,并于最近进行了更新(2014年10月10日):
某些浏览器(IE,Konqueror)支持非标准属性“ scrollbar-shadow-color”,“ scrollbar-track-color”等。这些属性是非法的:它们既没有在任何CSS规范中定义,也没有被标记为专有(通过在它们前面加上“ -vendor-”)
Microsoft 正如其他人提到的那样,Microsoft支持滚动条样式,但仅适用于IE8及更高版本。
例:
<!-- language: lang-css --> .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现在具有自己的版本:
/* 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(Gecko)
从64版开始,Firefox通过属性scrollbar-color(部分为W3C draft)和scrollbar-width(W3C draft)支持滚动条样式。在此答案中可以找到有关实现的一些很好的信息。
防止非法滚动条样式 万一您想防止没有以“ -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; }