zoukankan      html  css  js  c++  java
  • 原生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结构:

  • 相关阅读:
    June. 26th 2018, Week 26th. Tuesday
    June. 25th 2018, Week 26th. Monday
    June. 24th 2018, Week 26th. Sunday
    June. 23rd 2018, Week 25th. Saturday
    June. 22 2018, Week 25th. Friday
    June. 21 2018, Week 25th. Thursday
    June. 20 2018, Week 25th. Wednesday
    【2018.10.11 C与C++基础】C Preprocessor的功能及缺陷(草稿)
    June.19 2018, Week 25th Tuesday
    June 18. 2018, Week 25th. Monday
  • 原文地址:https://www.cnblogs.com/naokr/p/5955624.html
Copyright © 2011-2022 走看看