javascript滚动条之ScrollBar.js

ScrollBar.js是一个仅仅120行的滚动条JS插件,使用非常方便
详情阅读:https://git.oschina.net/wuquanyao/scrollbar.js
/*=================================<br>  * ScrollBar.js beta<br>  * Author:wuquanyao<br>  * Email:wqynqa@163.com<br>  *=================================*/<br> var ScrollBar = {};<br> (function(ScrollBar){<br>     var parent,root,track,bar,tx,ch,h,sh,rate;<br>     ScrollBar.adapter = function(config)<br>     {<br>         init(config);<br>     }<br>     function init(config)<br>     {<br>         parent = document.querySelector(config['selector']);<br>         root   = parent.parentNode;<br>         createBar();<br>         mouseaction();<br>     }<br>     function createBar()<br>     {<br>         track = document.createElement('div');<br>         track.setAttribute('class','scroll-track');<br>         bar   = document.createElement('div');<br>         bar.setAttribute('class','scroll-bar');<br>         track.appendChild(bar);<br>         root.appendChild(track);<br>         sh = root.scrollHeight;<br>         ch = root.offsetHeight;<br>         tx = root.offsetTop;<br>         h  = ch/sh*ch;<br>         if(h             bar.style.height = '30px';<br>             h = 30;<br>         }else{<br>             bar.style.height = h+'px';<br>         }<br>         rate = (sh-ch)/(ch-h);<br>     }<br>     function mouseaction()<br>     {<br>         function eventparse(obj,type,func){<br>             if(document.attachEvent){<br>                 var events = {<br>                     click:'onclick',<br>                     mouseover:'onmouseover',<br>                     mousemove:'onmousemove',<br>                     mouseout:'onmouseout',<br>                     mousedown:'onmousedown',<br>                     mouseup:'onmouseup',<br>                     wheel:'DOMMouseScroll'<br>                 };<br>                 obj.attachEvent(events[type],func);<br>             }else{<br>                 var events = {<br>                     click:'click',<br>                     mouseover:'mouseover',<br>                     mousemove:'mousemove',<br>                     mouseout:'mouseout',<br>                     mousedown:'mousedown',<br>                     mouseup:'mouseup',<br>                     wheel:'DOMMouseScroll'<br>                 };<br>                 obj.addEventListener(events[type],func,false);<br>             }<br>         }<br>         <br>         function init(){<br>             var bool = false,v;<br>             eventparse(bar,'mousedown',function(event){<br>                 bool  = true;<br>             });            <br>             eventparse(document,'mousemove',function(event){<br>                 if(bool){<br>                     if(event.clientY                         v = 0;<br>                     }else if(event.clientY>=(tx+ch-h)){<br>                         v = tx+ch-h;<br>                     }else{<br>                         v = event.clientY;<br>                     }<br>                     parent.style.transform = 'translate(0px,'+(-v*rate)+'px)'; <br>                     bar.style.transform = 'translateY('+v+'px)';<br>                 }<br>             });<br>             eventparse(document,'mouseup',function(event){ <br>                 bool = false;<br>             });<br>             // eventparse(track,'click',function(event){<br>             //     event.stopPropagation();<br>             //     bar.style.transition = 'all 0ms ease 0ms';<br>             //     if(event.clientY             //         bar.style.transform = 'translate(0px,0px)';<br>             //     }else if(event.clientY>=(tx+ch-h)){<br>             //         bar.style.transform = 'translate(0px,'+(tx+ch-h)+'px)';<br>             //     }else{<br>             //         bar.style.transform = 'translate(0px,'+(event.clientY-h/2)+'px)';<br>             //     }<br>             //     parent.style.transform = 'translate(0px,'+((-event.clientY+tx)*rate)+'px)'; <br>             // });<br>             var offset=0;<br>             if (window.navigator.userAgent.indexOf("Firefox") >= 0) {<br>                 eventparse(parent,'wheel',wheelEvent);    <br>             }else{<br>                 parent.onmousewheel=parent.onmousewheel=wheelEvent;<br>             }<br> <br>             function wheelEvent(e){<br>                 var transform,bO,wv = (e.detail/3*20) || (-(e.wheelDelta/120*20));<br>                 if((offset=0))){<br>                     transform = 'translate(0px,'+(-offset)+'px)'; <br>                     bO = 'translateY('+(offset/rate)+'px)';<br>                     offset = ((offset+wv)>(sh-ch))?offset:( ((offset+wv)                 }<br>                 bar.style.transform = bO;<br>                 parent.style.transform = transform; <br>             }<br>         }<br>         init();<br>     }<br> })(ScrollBar);

AD：真正免费，域名+虚机+企业邮箱=0元