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

本文实例讲述了JS实现的页面自定义滚动条效果。分享给大家供大家参考，具体如下：
这里演示网页上用的滚动条效果，是一个自定义的滚动条代码，除了上下两个箭头以外，滚动条和一般的浏览器基本差不多，鼠标滚轮滚动，滚动条滚动。html结构很简单，mainBox是外层div，content是内容，滚动条div是js动态生成的。
运行效果截图如下：

在线演示地址如下：
http://demo.jb51.net/js/2015/js-web-zdy-scroll-style-codes/
具体代码如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>滚动条</title><style type="text/css">*{ 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（http://files.jb51.net/file_images/article/201510/20151026113716032.jpg） }.scrollDiv{ width:18px; position:absolute; top:0; background:#666; border-radius:10px;}</style></head><body><div id="mainBox"> <div id="content"></div></div><p></p><script type="text/javascript">var doc=document;var _wheelData=-1;var mainBox=doc.getElementById（"mainBox"）;function bind（obj,type,handler）{ var node=typeof obj=="string"?$（obj）:obj; if（node.addEventListener）{node.addEventListener（type,handler,false）; }else if（node.attachEvent）{node.attachEvent（"on"+type,handler）; }else{node["on"+type]=handler; }}function mouseWheel（obj,handler）{ var node=typeof obj=="string"?$（obj）:obj;bind（node,"mousewheel",function（event）{ var data=-getWheelData（event）; handler（data）; if（document.all）{window.event.returnValue=false; }else{event.preventDefault（）; }}）;//火狐bind（node,"DOMMouseScroll",function（event）{ var data=getWheelData（event）; handler（data）; event.preventDefault（）;}）;function getWheelData（event）{ var e=event||window.event; return e.wheelDelta?e.wheelDelta:e.detail*40;}}function addScroll（）{ this.init.apply（this,arguments）;}addScroll.prototype={ init:function（mainBox,contentBox,className）{var mainBox=doc.getElementById（mainBox）;var contentBox=doc.getElementById（contentBox）;var scrollDiv=this._createScroll（mainBox,className）;this._resizeScorll（scrollDiv,mainBox,contentBox）;this._tragScroll（scrollDiv,mainBox,contentBox）;this._wheelChange（scrollDiv,mainBox,contentBox）;this._clickScroll（scrollDiv,mainBox,contentBox）; }, //创建滚动条 _createScroll:function（mainBox,className）{var _scrollBox=doc.createElement（"div"）var _scroll=doc.createElement（"div"）;var span=doc.createElement（"span"）;_scrollBox.appendChild（_scroll）;_scroll.appendChild（span）;_scroll.className=className;mainBox.appendChild（_scrollBox）;return _scroll; }, //调整滚动条 _resizeScorll:function（element,mainBox,contentBox）{var p=element.parentNode;var conHeight=contentBox.offsetHeight;var _width=mainBox.clientWidth;var _height=mainBox.clientHeight;var _scrollWidth=element.offsetWidth;var _left=_width-_scrollWidth;p.style.width=_scrollWidth+"px";p.style.height=_height+"px";p.style.left=_left+"px";p.style.position="absolute";p.style.background="#ccc";contentBox.style.width=（mainBox.offsetWidth-_scrollWidth）+"px";var _scrollHeight=parseInt（_height*（_height/conHeight））;if（_scrollHeight>=mainBox.clientHeight）{ element.parentNode.style.display="none";}element.style.height=_scrollHeight+"px"; }, //拖动滚动条 _tragScroll:function（element,mainBox,contentBox）{var mainHeight=mainBox.clientHeight;element.onmousedown=function（event）{ var _this=this; var _scrollTop=element.offsetTop; var e=event||window.event; var top=e.clientY; //this.onmousemove=scrollGo; document.onmousemove=scrollGo; document.onmouseup=function（event）{this.onmousemove=null; } function scrollGo（event）{var e=event||window.event;var _top=e.clientY;var _t=_top-top+_scrollTop;if（_t>（mainHeight-element.offsetHeight））{ _t=mainHeight-element.offsetHeight;}if（_t<=0）{ _t=0;}element.style.top=_t+"px";contentBox.style.top=-_t*（contentBox.offsetHeight/mainBox.offsetHeight）+"px";_wheelData=_t; }}element.onmouseover=function（）{ this.style.background="#444"; }element.onmouseout=function（）{ this.style.background="#666"; } }, //鼠标滚轮滚动，滚动条滚动 _wheelChange:function（element,mainBox,contentBox）{var node=typeof mainBox=="string"?$（mainBox）:mainBox;var flag=0,rate=0,wheelFlag=0;if（node）{ mouseWheel（node,function（data）{wheelFlag+=data;if（_wheelData>=0）{ flag=_wheelData; element.style.top=flag+"px"; wheelFlag=_wheelData*12; _wheelData=-1;}else{ flag=wheelFlag/12;}if（flag<=0）{ flag=0; wheelFlag=0;}if（flag>=（mainBox.offsetHeight-element.offsetHeight））{ flag=（mainBox.clientHeight-element.offsetHeight）; wheelFlag=（mainBox.clientHeight-element.offsetHeight）*12;}element.style.top=flag+"px";contentBox.style.top=-flag*（contentBox.offsetHeight/mainBox.offsetHeight）+"px"; }）;} }, _clickScroll:function（element,mainBox,contentBox）{var p=element.parentNode;p.onclick=function（event）{ var e=event||window.event; var t=e.target||e.srcElement; var sTop=document.documentElement.scrollTop>0?document.documentElement.scrollTop:document.body.scrollTop; var top=mainBox.offsetTop; var _top=e.clientY+sTop-top-element.offsetHeight/2; if（_top<=0）{_top=0; } if（_top>=（mainBox.clientHeight-element.offsetHeight））{_top=mainBox.clientHeight-element.offsetHeight; } if（t！=element）{element.style.top=_top+"px";contentBox.style.top=-_top*（contentBox.offsetHeight/mainBox.offsetHeight）+"px";_wheelData=_top; }} }}new addScroll（"mainBox","content","scrollDiv"）;</script></body></html>

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