JS实现的页面自定义滚动条效果

本文实例讲述了JS实现的页面自定义滚动条效果。分享给大家供大家参考，具体如下：

这里演示网页上用的滚动条效果，是一个自定义的滚动条代码，除了上下两个箭头以外，滚动条和一般的浏览器基本差不多，鼠标滚轮滚动，滚动条滚动。html结构很简单，mainBox是外层div，content是内容，滚动条div是js动态生成的。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-web-zdy-scroll-style-codes/

具体代码如下：

*{ margin:0; padding:0;}
p{ height:1000px;}
#mainBox{ width:400px; height:500px; border:1px #bbb solid; position:relative; overflow:hidden; margin:50px auto;}
#content{ height:2500px; position:absolute; left:0; top:0; background:url(//img.jbzj.com/file_images/article/201510/20151026113716032.jpg) }
.scrollDiv{ width:18px; position:absolute; top:0; background:#666; border-radius:10px;}




 

希望本文所述对大家Javascript程序设计有所帮助。