浏览器原生的滚动条有时过多会影响界面美观，IE下的滚动条更是如此，有时我们需要美化一下滚动条，可以使用浏览器原生的样式，或者使用JS插件，这里介绍如何修改Chrome下的滚动条样式。
主要借助伪元素实现：
//index.html <body> <div class="container"> <p>Pellentesque habitant morbi tristique senectus...(很多文字)</p> </div> </body> //style.css .container { width: 300px; height: 100px; overflow: auto; } p { width: 500px; height: 200px; } ::-webkit-scrollbar { width: 10px; height: 10px; /*background-color: #ddd;*/ } /*滑块*/ ::-webkit-scrollbar-thumb { background-color: #333; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background-color: #777; } /*滑道*/ ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px #333; border-radius: 10px; }运行效果：
浏览器默认情况下上下左右各有一个按钮用来滚动，我们也可以自定义图片来代替它：
//style.css //上述代码 ... /*上下左右按钮*/ ::-webkit-scrollbar-button { /*纵方向按钮的高度，宽度由scrollbar定义*/ height: 20px; /*横方向按钮的高度，高度由scrollbar定义*/ width: 20px; } ::-webkit-scrollbar-button:vertical:start { background-image: url("up.png"), -webkit-linear-gradient(left, #f9f9f9 50%, #e2e2e2 100%); background-repeat: no-repeat; background-position: bottom left, 0 0; } ::-webkit-scrollbar-button:vertical:end { background-image: url("down.png"), -webkit-linear-gradient(left, #f9f9f9 50%, #e2e2e2 100%); background-repeat: no-repeat; background-position: bottom left, 0 0; } ::-webkit-scrollbar-button:horizontal:start { background-image: url("left.png"), -webkit-linear-gradient(left, #f9f9f9 50%, #e2e2e2 100%); background-repeat: no-repeat; background-position: bottom left, 0 0; } ::-webkit-scrollbar-button:horizontal:end { background-image: url("right.png"), -webkit-linear-gradient(left, #f9f9f9 50%, #e2e2e2 100%); background-repeat: no-repeat; background-position: bottom left, 0 0; }运行效果：
以上代码只在Chrome下可行，其他浏览器兼容性可参考http://caniuse.com/#search=scrollbar
源码地址： https://github.com/justforuse/HTML-CSS-JS/tree/master/webkit-scrollbar/final
参考链接： https://scotch.io/tutorials/customize-the-browsers-scrollbar-with-css http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task
使用JS插件的话可以上gayhub查找相关项目，在此列举2个：
https://github.com/cubiq/iscrollhttps://github.com/inuyaksa/jquery.nicescroll