1.不同浏览器支持的滚动条是不一样的。我们先说下谷歌浏览器。 谷歌浏览器支持webkit属性。（还有一点谷歌浏览器支持的最小字体为12px） 具体写法如下
{#滚动条样式 webkit不适合火狐浏览器#} ::-webkit-scrollbar { width: 16px; {# 滚动条粗细 #} height: 16px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { border-radius: 999px; {# 滚动条背景条 #} border: 5px solid transparent; } ::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset; {# 滚动条阴影#} } ::-webkit-scrollbar-thumb { min-height: 20px; {# 滚动条颜色 #} background-clip: content-box; box-shadow: 0 0 0 10px #009688 inset; } ::-webkit-scrollbar-corner { background: transparent; {# 角落颜色#} }2.相同的代码对于火狐浏览器、IE浏览器就是不支持webkit的，它只会保持原有的样式。 对于这两个浏览器我们只能改变滚动条的颜色，改不了它的形状。好比上面的圆角滚动条。在滚动条所在div加上如下属性即可改变颜色等。（我百度的时候，为了不想要这种滚动条，将滚动条做成透明的居多）
scrollbar-color: #009688 #20222a; {# 滚动条颜色 滚动条背景颜色 #} scrollbar-track-color: transparent; -ms-scrollbar-track-color: transparent;3.最后，如果客户需求觉还是要好看的滚动条。那么我们只能用js写一个滚动条了。比较繁琐，因为我也没有过就不给大家讲了。给大家奉上几个模板。（首先需要读懂他的代码，因为操作的元素肯定和你的不同。）
链接：https://pan.baidu.com/s/1reoQ1_Dt7BSuWDFZAyETzw 提取码：r7ps
