【库】JavaScript——滚动条( 不是很完善 )

【 JavaScript——滚动条 】

代码解析:

　　拖动滚动的技术原理主要和拖曳是一样，其次还有滚轮事件的ff兼容性

　　

/* CK.Huang
 * API :
 *   name : 需要设置滚动条的对象的id名
 *   options {key:value}
 *     -- barColor : 滚动条背景色
 *     -- moveBarColor : 滚动块颜色
 *     -- barWidth : 滚动条宽度
 *     -- radius : 圆角的圆滑像素
 *     -- slideSpeed : 鼠标滚动速度
 *     -- allowSlide : 是否允许鼠标滚动
 *      
 */

 /*bug 1. 鼠标点击滚动条某个地方滑块直接跳到该地方  2. 鼠标滚轮事件  3. 移动太快，并脱离滚动条位置会消失*/
var ScrollBar = function(name,options){
    var _this = this;
    this.option = $('#'+name);
    this.elem = document.getElementById(name);
    this.opWidth = this.option.width(); 
    this.opHeight = this.option.height();
    this.pare = this.option.parent();    
    this.paWidth = this.pare.width();
    this.paHeight = this.pare.height();
    this._isEx = false;
    //this.elem = null;

    /*set api params*/
    this.barColor = "";
    this.moveBarColor = "#9F72E3";
    this.barWidth = "15px";
    this.radius = "";
    this.hide = false;
    this.slideSpeed = 10; // moving speed
    this.allowSlide = true;
    options && $.extend(this,options);

    /*set default params*/
    this._bar = "<div class='scrollbar_fullbar'></div>";
    this._moveBar = "<div class='scrollbar_movebar'></div>";
    this.isMoving = false;
    this.slideMove = 0;
    this.moveHeight = 0;
    this.slide = false;
    this.rollD = null ; //direction
    this.exBar = null; //Bar存在性检测
    this.init();
}

ScrollBar.prototype = {
    init : function(){
        console.log('调用插件');
        this.isEx();
        this.removeEvent();
        console.log('this,_isEx',this._isEx);
        if( this._isEx === true ){
            this.option.css('position','relative');
            this.pare.css('position','relative');        
            this.setBar();
            this.getMoveBar();
            this.mouseMove();
            //this.clickMove();
            if(this.allowSlide === true){
                this.addEvent();
            }
            this.setStyle();
        }else{
            this.pare.find('.scrollbar_fullbar').remove();
            this.option.css('top','0px');
        }
        
    },
    setOriginal : function(){
        this.option.css({'top':'0px'});
        console.log('this.option',this.pare);
        this.pare.find('.scrollbar_fullbar').remove();
    },
    setOutHide : function(e){
        var _this = this;
        // if( this.hide === true ){
        //     this._bar.css('opacity','0');
            
        //     _this.pare.mouseenter(function(){
        //         _this._bar.animate({'opacity':'1'},300);
            
        //         e.preventDefault();
        //     });
        //     _this.pare.mouseleave(function(e){
        //         _this._bar.animate({'opacity':'0'},800);                                        
        //     });    
        // }else{

        // }

    },
    setRadius : function(){
        if( this.radis !== ""){
            this._moveBar.css({'-webkit-border-radius':this.radius,'-moz-border-radius':this.radius,'border-radius':this.radius});
        }else{

        }
    },
    isEx : function(){
        if( this.opHeight > this.paHeight ){
            this._isEx = true;
        }else{
            this._isEx = false;
        }
        console.log('this',this._isEx);
    },
    setStyle : function(){
        this._bar.css({'background':this.barColor,'height':this.paHeight,'width':this.barWidth,'right':'0px','position':'absolute','top':'0px'});
        this._moveBar.css({'width':this.barWidth,'background':this.moveBarColor,'height':this.moveHeight,'position':'relative','top':'0px','cursor':'pointer'});
        this.pare.css({'overflow':'hidden'});
        this.setRadius();
        this.setOutHide();
    },
    setBar : function(){
        if(this.isBarEx() === false){
            $(this._bar).appendTo(this.pare);
        }
        this._bar = this.pare.find('.scrollbar_fullbar');            
    },
    isBarEx : function(){
        if(this.pare.find('.scrollbar_fullbar').length === 0 ){
            return false;
        }
        //console.log('this.bar:',this.exBar,this.pare.find('.scrollbar_fullbar').length);
    },
    isMoveBarEx : function(){
        if(this.pare.find('.scrollbar_movebar').length === 0 ){
            return false;
        }
    },
    getMoveBar : function(){
        this.moveHeight = parseInt( ( this.paHeight * this.paHeight ) / this.opHeight ) + 1;
        if(this.isMoveBarEx() === false){
            $(this._moveBar).appendTo($(this._bar));
        }
        this._moveBar = this.pare.find('.scrollbar_movebar');    
    },
    mouseMove : function(e){
        var _this = this;
        _this._moveBar.bind('mousedown',function(e){            
            var $this = $(this);
            var orY = e.pageY; 
            var orT = parseInt($this.css('top'));
            $(document).mousemove(function(e1){
                var nowY = e1.pageY ;
                var nowT = nowY - orY + orT;
                _this.setTop(nowT);
                _this.setContentTop(nowT);                
                _this._bar.show();    
                e1.preventDefault();
                return false;    

            });
            $(document).mouseout(function(){
                $(document).unbind('mousemove');    
                return false;
            });

            $(document).mouseup(function(){        
                $(document).unbind('mousemove');
                return false;
            });

            return false;
        });
    },
    setTop : function(top){
        var _maxTop = this.paHeight - this.moveHeight;
        if(this.slide === true){
            if( top > _maxTop ){
                this._moveBar.animate({'top':_maxTop},400);
            }else if( top == 0 || top < 0 ){
                this._moveBar.animate({'top':'0px'},400);
            }
            else{
                this._moveBar.animate({'top':top},400);
            } 
        }else{
            if( top > _maxTop ){
                this._moveBar.css('top',_maxTop);
            }else if( top == 0 || top < 0 ){
                this._moveBar.css('top','0px');
            }
            else{
                this._moveBar.css('top',top);
            } 

        }
    },
    setContentTop : function(top){
        var rate = this.opHeight / this.paHeight;
        var _top = - ( top * rate );
        var _maxTop =  this.paHeight - this.opHeight ;
        if(this.slide === true){
            if(_top < _maxTop ){
               this.option.animate({'top':_maxTop},400);
            }else if( top == 0 || top < 0){
                this.option.animate({'top':'0px'},400);
            }else{
                this.option.animate({'top':_top},400);
            }
        }else{
               if(_top < _maxTop ){
               this.option.css('top',_maxTop);
            }else if( top == 0 || top < 0){
                this.option.css('top','0px');
            }else{
                this.option.css('top',_top);
            }
        }
    },


    /*slide move*/
    handler : function(e){
         this.rollD = -e.detail;
         this.slideAction();
         e.preventDefault(); 
    },

    addEvent : function() {
        var _this = this;
        if($.browser.mozilla){
            _this.elem.addEventListener('DOMMouseScroll',_this.handler,false);        
        }else{
            //console.log(this.elem);
            _this.elem.onmousewheel = function(e){
                e = e || window.event;
                _this.rollD = e.wheelDelta;
                _this.slideAction();
                //console.log('onmousewheel',e.wheelDelta)            
                e.returnValue = false;
            }
            
        }
        //this.moveDirection();
    },
    removeEvent : function(){
        var _this = this;
        if($.browser.mozilla){
            _this.elem.removeEventListener('DOMMouseScroll',_this.handler,false);
        }else{
            //console.log(this.elem);
            _this.elem.onmousewheel = null;
            
        }
        //this.moveDirection();
    },

    slideAction : function(){
        var _maxTop = this.paHeight - this.moveHeight;
        var nowT = parseInt(this._moveBar.css('top'));
        if(this.rollD > 0 ){    
            if(this.slideMove < 0){
                this.slideMove = 0;
            }else{
                this.slideMove = nowT - this.slideSpeed;
            }            
        }else if(this.rollD < 0){    
            if(this.slideMove > _maxTop || this.slideMove == _maxTop){
                this.slideMove = _maxTop;        
            }else{                
                this.slideMove =  nowT + this.slideSpeed;
            }        
        }
        //console.log(this.slideMove);
        this.setTop(this.slideMove);
        this.setContentTop(this.slideMove);        
    },

    /*click move*/
    clickMove : function(){
        var _this = this;
        this._bar.bind('click',function(e){
            var top = e.pageY - _this._bar.offset().top - _this.moveHeight/2;
            console.log(_this._bar.offset().top);
            _this.slide = true;
            _this.setTop(top);
            _this.setContentTop(top);
            e.preventDefault();
            this._bar.unbind('click');
            _this.slide = false;        
        });
    }
}