首页 > 代码库 > 原生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.onmousemove = function(ev){                var oEv = ev || event;                var l = oEv.clientY - disY;                setTop(l);            };            document.onmouseup = function(){                document.onmousemove = null;                document.onmouseup = null;            };            return false;        };        function mouseWheel(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;        }        function setTop(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‘;        }        function setBarHeight(){            var containerHeight = oWp.offsetHeight,                contentHeight = oDiv.offsetHeight;            oBox.style.height = (containerHeight * containerHeight /contentHeight) + ‘px‘;        }        function addEvent(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.onmousedown = 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.onmousedown = 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写法

 html结构:

技术分享

原生js实现滚动条