自定义美美的滚动条

唔,本来是不想写这个的,因为搜索jQuery就能搜索到的说。但是为了更方便以后自己用到,还是写个步骤记录一下吧!

首先你需要引用两个JS文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

下载连接:
jquery.min.js
jquery.nicescroll.js

之后加入以下代码

<script>
$("html").niceScroll({ 
cursorcolor:"#000",  
cursoropacitymax:1,  
touchbehavior:false,  
cursorwidth:"5px",  
cursorborder:"0",  
cursorborderradius:"5px"  
}); 
</script>
  1. 第二行html的部分可以改成任何ID或者class,相应的换成.wrap #wrap就可以了。
  2. 第三行的#000可以换成任何你想要显示的颜色。
  3. 第六行的5px是滚动条的宽度。
  4. 第八行的5px是滚动条边角的弧度。

演示: DEMO

参考资料

  1. jquery.nicescroll
  2. Nicescroll 3