js模擬捲軸(橫向垂直)_javascript技巧

JS：

複製程式碼 程式碼如下:

(function(win){
    var doc = win.document,db = doc.body;
    var mousewheel = win.document,db = doc.body;
    var mousewheel = 文件中的 'onmousewheel' ? 'mousewheel' ? 'mousheel' 🎜 >    var skyScroll = function(opts){ return new skyScroll.prototype.init(opts);};
    skyScroll.prototype = {         init:function ( opts){
            var set = _extend({
               dir:'top',
                width:500,
              回調：函數(){}
            },opts||{});
           .target = _$(set.target)
           this; .parent = this.target.parentNode;
            this.width = set.width;           .dir;
            this.callback = set.callback ;
            this.addWarpper(set.dir);
                                this.addVscroll();
                     休息中；
                  this.addLscroll();
                     休息中；
                this.addVscroll();
                    this.addLscroll();
            };
            _addEvent(doc,'mousedown',function(e){
           );
if(target == _this.vScroll || target == _this.lScroll){
                             pos.tLeft = parseInt(_this.target.style .left);                 🎜>                  mousemoveHandle = _mo usemoveHandle.call(_this,pos,目標);
                  _addEvent(doc,'mousemove',mousemoveHandle);
   Event(doc,'mousemove',mousemoveHandle)});               }; 🎜>         = _this.vScrollOuter || 目標== _this.lScrollOuter){
                 _mounsedownHandle. 🎜>            });
        },  
        //外部提供重新計算捲軸高度或寬度以及滾動範圍的方法，用於動態改變內容時，請做相對應的調整
 var H = this.target.offsetHeight,W = this.target.offsetWidth,T = parseInt(this.target.style.top),L = parseInt(this.target.style.left),h,w;
            this.ratio = {l:this.width / W,v:this.height / H};
            this.range = {l:W-this.width, t: H - this.height};
            if(this.vScroll){
                h = Math.round(Math.pow(this/height      h = Math.round(Math.pow)/height  
                this.vScroll.style.height = h 'px';
                this.vScroll.style.top = Math.round(this.height * (-T/H)) 'px';
                this.range.st = this.height - h;
                this.wrapper.style.height = this.height 'px';
            };
            if(this.lScroll){
                       this.lScroll.style.width = w 'px';
                this.lScroll.style.left = Math.round(this.width * (-L/W)) 'px';
                this.range.sl = this.width - w;
                this.wrapper.style.width = this.width 'px';
            };
        },
        //对外提供设置滚动条的位置的方法
        set:function(pos){
            if(!_isObject(pos)) throw new Error('参数类型错误，参数必须是object!');
            if(pos.top && !isNaN(parseInt(pos.top)) && this.vScroll){
                var top = Math.min(pos.top,this.range.t);
                this.target.style.top = -top + 'px';
                this.vScroll.style.top = Math.round(this.height * (top / this.target.offsetHeight)) + 'px';
            };
            if(pos.left && !isNaN(parseInt(pos.left)) && this.lScroll){
                var left = Math.min(pos.left,this.range.l);
                this.target.style.left = -left + 'px';
                this.lScroll.style.left = Math.round(this.width * (left / this.target.offsetWidth)) + 'px';
            };
        },
        addWarpper:function(dir){
            if(this.wrapper) return;
            var _this = this,W = this.target.offsetWidth,H = this.target.offsetHeight,mousewheelHandle;
            this.wrapper = _createEl('

',this.parent);
            this.wrapper.appendChild(this.target);
            this.target.style.cssText = 'position:absolute;top:0;left:0';
            switch(dir){
                case 'top':
                    this.wrapper.style.height = this.height + 'px';
                    this.wrapper.style.width = W + 'px';
                    break;
                case 'left':
                    this.wrapper.style.height = H + 'px';
                    this.wrapper.style.width = this.width + 'px';
                    break;
                default :
                    this.wrapper.style.width = this.width + 'px';
                    this.wrapper.style.height = this.height + 'px';
            };
            _addEvent(this.wrapper,'mouseenter',function(e){
                var pos = {};
                pos.tTop = parseInt(_this.target.style.top);
                pos.tLeft = parseInt(_this.target.style.left);
                if(_this.vScroll) pos.sTop = parseInt(_this.vScroll.style.top);
                if(_this.lScroll) pos.sLeft = parseInt(_this.lScroll.style.left);
                mousewheelHandle = _mousewheelHandle.call(_this,pos);
                _addEvent(_this.wrapper,'mousewheel',mousewheelHandle);
                _addEvent(_this.wrapper,'mouseleave',function(){_removeEvent(_this.wrapper,'mousewheel',mousewheelHandle)});
            });
        },
        //对外提供添加竖向滚动条的方法
        addVscroll:function(){
            if(this.vScroll) return;
            !this.wrapper && this.addWarpper('top');
            this.vScrollOuter = _createEl('

',this.wrapper)
            this.vScroll = _createEl('

',this.wrapper);
            this.recalculated();
        },
        //对外提供添加横向滚动条的方法
        addLscroll:function(){
            if(this.lScroll) return;
            !this.wrapper && this.addWarpper('left');
            this.lScrollOuter = _createEl('

',this.wrapper)
            this.lScroll = _createEl('

',this.wrapper);
            this.recalculated();
        } tion(){
            _deleteScroll.call(this, 1,this.vScroll,this.vScrollOuter,this.lScroll,this.lScrollOuter ）；
        },
        //刪除橫向的捲>            _deleteScroll.call(this ,0,this.lScroll,this.lScrollOuter,this.vScroll,this.vScrollOuter) ;
        }
    };
 roll = skyScroll;
    /*************************私有函數*************************/
    function _mousemoveHandle(pos,target){
     函數(e){
            e = e ||視窗.事件;
           .style.top = Math.min(0,Math.max(pos .tTop (pos.y - newPos.y)/_this.ratio.v,-_this.range.t)) 'px ';
            target.style.top = Math.max(0,Math.min(pos .sTop - pos.y newPos.y,_this.range.st)) 'px';
           _this.callback.call(_this);    }:function(e){
            e = e ||視窗.事件;
            var newPos = _getMousePos(e); Math.min(0,Math.max(pos.tLeft (pos.x - newPos.x)/_this.ratio.l,-_this.range.l)) 'px ';
            target.style.left = Math.max(0,Math.min(pos.sLeft - pos.sLeft - pos.Left newPos.x,_this.range.sl)) 'px';
            _this.callback.call(_this);
   🎜>    };

    function _mousewheelHandle(pos){
        var _this = this;
        返回this.vScroll ？函數(e){
            e = e ||視窗.事件;
           wheelDelta /120 : -e.detail/3;
            var top = parseInt(_this.target.style.top);
             var dist = 資料* 5;
            _this.target.style .top = Math.min(0,Math.max(top dist / _this.ratio.v, -_this.range.t)) 'px';
            _this.vScroll.style.top = Math.max(0     _this.vScroll.style.top = Math.max(0     _this.vScroll.style.top = Math.max(0 ,Math.min(sTop-dist,_this.range.st)) 'px';
            _this.callback.call(_this);
    _this.callback.call(_this);
    :function(e){
            e = e ||窗口.事件;
            _stopEvent(e);
            var data = e.wheelDelta ? e.wheelDelta /120 : -e.detail/3;
            var left = parseInt(_this.target.style.left);
            var sLeft = parseInt(_this.lScroll.style.left);
            var dist = 資料 * 5;
            _this.target.style.left = Math.min(0,Math.max(left dist / _this.ratio.l, -_this.range.l)) 'px';
            _this.lScroll.style.left = Math.max(0,Math.min(sLeft-dist,_this.range.sl)) 'px';
            _this.callback.call(_this);
        }
    };
    function _mounsedownHandle(pos,target){
        var _this = this;
        var elPos = _getElementPosition(target);
        if(target == this.vScrollOuter){
            console.log(pos.y - elPos.y);
            _this.set({
                 
        }else{
            _this.set({
             });
        };
    };
    function _deleteScroll(n,s1,s11,s2,s22){
        var o = n ? '高度' : '寬度' ,s = n ? '頂' : '左';
        if(!s1) 回傳；
        this.wrapper.removeChild(s1);
        this.wrapper.removeChild(s11);
        n ？
        if(!s2){
            this.wrapper.parentNode.appendChild(this.apptarget);
            this.wrapper.parentNode.removeChild(this.wrapper);
            this.target.style.cssText = '';
            this.wrapper = null;
        }else{
            this.wrapper.style[o.toLowerCase()] = this.target['offset' o] 'px';
            this.recalculated();
        };
        this.target.style[s] = '0px';
        //this.target.style[o.toLowerCase()]= 'auto';
    };
    /*************************工具函數*************************/
    function _$(id){
        return typeof id === 'string' ? doc.getElementById(id) : id;
    };
    function _extend(target,source){
        for(var key in source) target[key] = source[key];
        回目標；
    };
    function _createEl(html,parent){
        var div = doc.createElement('div');
        div.innerHTML = html;
        el = div.firstChild;
        父級 && 父級.appendChild(el);
        回 el;
    };
    function _getMousePos(e){
        if(e.pageX || e.pageY) return {x:e.pageX,y:e.pageY};
        return {
            x:e.clientX document。documentElement.scrollLeft ument.documentElement.scrollTop - document.body.clientTop
        };
    };
    function _isObject(o){
        return o === Object(o);
    };
    function _getElByClass(node,oClass,parent){
        var re = [],els,parent = 父級 ||文件    
        for(var i=0,len=els.length;i            if((' ' els[i]..className 'Class'. ; -1) re.push(els[i]);
        };
        再回；
    };
    函數 _stopEvent(e){
        e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true);
        e.preventDefault ? e.preventDefault() :(e.returnValue = false);
    };
    function _addEvent(el,type,fn){
        if(typeof el.addEventListener != 'undefine              el.addEventListener('滑鼠懸停',_findElement(fn),false);
            }else if(type === 'mouseleave'){
            
            }else{
               時使用中使用);
            }
        }else if(typeof el.attachEvent!= '
        }else{
            el['on' type] = fn;
        }
    };
    function _removeEvent(el,type,fn){
        if(typeof el.removeEventListener != 
        }else if(typeof el.detachEvent != 'undefined'){
            el.detachfn('on' type,);
        }else{
            el['on' type] = null;
        }
    };
    function _findElement(fn){
        return function(e){
         
            while(parent &&parent != this)parent =parent.parentNode;
            if(parent != this) fn.call(this,e);
        }
    };
    function _cancelSelect(){
        if (window.getSelection) {
                 window.getSelection().empty();
            } else if (window.getSelection().removeAllRanges) {  // Firefox
     
            }
        }else if (document.selection) { // IE？
        }
    };
    function _getElementPosition(el){
        var x = 0,y=0;
        if(el.getBoundingClientRect){
            var pos = el.getBoundingClientRect();
            var d_root = document.documentElement,db = document.body;
            x = pos.left Math.max(d_root.scrollLeft,db.scrollLeft) - d_root.clientLeft;
            y = pos.top Math.max(d_root.scrollTop,db.scrollTop) - d_root.clientTop;
        }else{
            while(el != db){
   
                y = el.offsetTop;
                el = el.offsetParent;
            };
        };
        return {
            x:x,
       
    };
})(視窗);

HTML：

複製程式碼程式碼如下：

    ;
    標題>
  

   
    <script> <BR> target:'scrollTest' <BR>        }); <BR>        var add = document.getElementById('add'); <BR> 🎜>        var setTop = document.getElementById ('setTop'); <BR>        var setLeft = document.getElementById('setLeft'); <BR>       document.getElementById('addSl') ; <BR>        var delSt = document.getElementById('delSt'); <BR>        var delSl = document.getElementById('delSunc') < 🎜>            var w = scrollTest. offsetWidth; <BR>            scrollTest.innerHTML = scrollTest.innerHTML; <BR>              setTop.onclick = function(){ <BR>            a.set({top:200} ); <BR>        } <BR>        setLeft.onclick = function(){ <BR>     🎜>        addSt.onclick = function(){ <BR>            a .addVscroll(); <BR>        }; <BR>        addSl.onclick = function(){ < }; <BR>        delSt.onclick = function(){ <BR>            a .delVscroll(); <BR>        } <BR>        delSl.onclick = function(){ <BR>  <BR>    </script>