css滚动条样式无效

今天在使用CSS样式美化页面的时候，遇到了一个比较棘手的问题。我想将浏览器滚动条进行美化，但是奇怪的是，我的CSS样式无效了。下面是代码：

::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.6); 
}
::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.1); 
}

我用了webkit前缀，但是效果还是不对。我找到了网上一些资料，发现与浏览器兼容有关。如果浏览器厂商不支持自定义滚动条，那么样式就不会生效。 这是因为不同的浏览器内核实现了不同的滚动条样式。比如著名的WebKit内核就可以通过CSS样式来控制滚动条，而Gecko内核则无法实现。而我的测试浏览器默认就是Gecko内核，所以才会无效。 解决办法有两个。一是使用第三方插件，比如NiceScroll或者iScroll等。这些插件可以让你自定义滚动条的各种样式，比如大小、颜色、形状等等。二是使用强制渲染，如果只是想要简单的美化滚动条，可以使用以下代码：

body{
scrollbar-face-color:#666;
scrollbar-shadow-color:#eee;
scrollbar-highlight-color:#eee;
scrollbar-3dlight-color:#ccc;
scrollbar-arrow-color:#000;
scrollbar-track-color:#eee;
scrollbar-darkshadow-color:#ccc;
}

这段代码可以让滚动条有一个简单的美化效果，但是可能并不是我们想要的效果。总之，想要自定义滚动条还是需要了解浏览器内核的实现方式，然后再确定是否采用自定义样式。

查看更多关于css滚动条样式无效的详细内容...