javascript滚动条之ScrollBar.js
- WBOY原創
- 2016-06-07 11:36:331633瀏覽
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元