原生js监听滚动条_原生js实现滚动条

var SimulateScroll = (function(){var oParent = document.getElementById('wrap-scroll-bar'),

oBox= document.getElementById('scroll-bar'),

oWp= document.getElementById('container'),

oDiv= document.getElementById('cont'),

bDown= true,

downFun= function(ev){var oEv = ev ||event;var disY = oEv.clientY -oBox.offsetTop;

document.οnmοusemοve= function(ev){var oEv = ev ||event;var l = oEv.clientY -disY;

setTop(l);

};

document.οnmοuseup= function(){

document.οnmοusemοve= null;

document.οnmοuseup= null;

};return false;

};functionmouseWheel(ev){var oEv = ev ||event;

bDown= oEv.wheelDelta ? oEv.wheelDelta < 0 : oEv.detail > 0;if(bDown){

setTop(oBox.offsetTop+ 10);

}else{

setTop(oBox.offsetTop- 10);

}if(oEv.preventDefault){

oEv.preventDefault();

}return false;

}functionsetTop(l){var h = oParent.offsetHeight -oBox.offsetHeight;if(l < 0){

l= 0;

}else if(l >h){

l=h;

}

oBox.style.top= l + 'px';var bl = l/h;

oDiv.style.top=- (oDiv.offsetHeight - oWp.offsetHeight) * bl + 'px';

}functionsetBarHeight(){var containerHeight =oWp.offsetHeight,

contentHeight=oDiv.offsetHeight;

oBox.style.height= (containerHeight * containerHeight /contentHeight) + 'px';

}functionaddEvent(obj, sEv, fn){if(obj.addEventListener){

obj.addEventListener(sEv,fn,false);

}else{

obj.attachEvent('on' +sEv,fn);

}

}return{

oWp : oWp,

oDiv : oDiv,

scrollHidden :function(){

oBox.style.height= 0;

oBox.style.top= 0;

oDiv.style.top= 0;

oBox.οnmοusedοwn= null;

query.EventUtil.remove(oParent,'mousewheel', mouseWheel);

query.EventUtil.remove(oParent,'DOMMouseScroll', mouseWheel);

query.EventUtil.remove(oWp,'mousewheel', mouseWheel);

query.EventUtil.remove(oWp,'DOMMouseScroll', mouseWheel);

},

isScrollShow :function(){if(oDiv.offsetHeight >oWp.offsetHeight){

SimulateScroll.inIt();

}else{

SimulateScroll.scrollHidden();

}

},

inIt :function(){

setBarHeight();

oBox.οnmοusedοwn=downFun;

query.EventUtil.add(oParent,'mousewheel', mouseWheel);

query.EventUtil.add(oParent,'DOMMouseScroll', mouseWheel);

query.EventUtil.add(oWp,'mousewheel', mouseWheel);

query.EventUtil.add(oWp,'DOMMouseScroll', mouseWheel);

}

}

})();

SimulateScroll.isScrollShow();

query.EventUtil.add(window,'resize',SimulateScroll.isScrollShow);//query.EventUtil 为原生js事件库。如需使用以上滚动条方法，需加上事件库，或者改为jq写法