自定义美美的滚动条
唔,本来是不想写这个的,因为搜索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>
- 第二行html的部分可以改成任何ID或者class,相应的换成.wrap #wrap就可以了。
- 第三行的#000可以换成任何你想要显示的颜色。
- 第六行的5px是滚动条的宽度。
- 第八行的5px是滚动条边角的弧度。
演示: DEMO