css滚动条样式制定 jscrollpane

背景先介绍一下：本人因工作需要，使用css、html、js时间两周，拿到定制浏览器滚动条的需求。

通过网上浏览才发现IE、FireFox、Chrome、Safari有着不同的浏览器内核，那么对于通过简单的css文件来实现统一样式的滚动条

明显不现实，或者是写多套代码，然后逐一调试，这个显然更不现实。

IE的滚动条样式自定义比较简单，而通过webkit可以实现对Chrome和Safari的统一自定义，有兴趣可以参考webkit的官方demo和这个连接。

火狐也有自己的定义方式，不熟就不列举了。

最终找到两个通过jquery来实现的开源组件，jQuery custom content scroller和jscrollpane

前者的官方文档比较多，属性也比较多，对于我这个菜鸟来说看起来比较困难，特别是浏览了它的示例后更加坚定了放弃的决定。

所以果断使用jscrollpane，可以在这里下载，jscrollpane相对来说轻量级一些，也比较容易配置，按官方提示很快就可以成功调用。它的demo也比较多，应该可以满足比较多的需求。

参照官方提供的css文件（jquery.jscrollpane.css），照猫画虎，注意区分jspDrag和jspTrack。

需要注意的是，如果元素的个数是动态的，也就是内容不固定，那么在html中不要设置DIV的class属性，然后当所有元素都添加成功之后，在js文件中添加如下代码：

$("#yourID").addClass('scroll-pane');$('.scroll-pane').jScrollPane();//初始化函数否则动态生成的元素没办法进行滚动。在html中直接初始化jscrollpane适用于元素个数固定的情况。下面是我做的一个demo截图。<img src="http://img.blog.csdn.net/20160225165724261?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />