原生js实现滚动条

Posted 2020-08-14

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结构：