jQuery，自定义滚动条

目的：用js模拟实现滚动条，从而达到设计图以及产品要求的效果……
原理：伴随着父级容器overflow，控制绝对容器的left,top值，从而达到效果。

在线代码地址：http://runjs.cn/code/agzuqcdh

在线测试地址：http://sandbox.runjs.cn/show/agzuqcdh

 

html代码

<div id="show">
            <!--内容区域-->
            <div id="container">
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
                <p>1326546478797897987</p>
            </div>
            
            <!--滚动条区域-->
            <div id="sctollCon">
                <div id="sctollDo"></div>
            </div>
        </div>

js代码：

ScorllTop({
    "show":$("#show"),//可视区域
    "container":$("#container"),//内容区域
     "scroll":$("#sctollCon"),//滚动条区域
     "scrollDo":$("#sctollDo")//滚动条

});

//竖向的滚动条，四个参数,jQuery对象，
// {
//     "show":,//可视区域
//     "container":,//内容区域
//     "scroll":,//滚动条区域
//     "scrollDo"://滚动条
// }
function ScorllTop($obj){
    var $container = $obj.show,//可视区域
        $contanr   = $obj.container,//内容区域
        $conScroll = $obj.scroll,//滚动条活动区域
        $sroll     = $obj.scrollDo,//滚动条
        startY     = 0,//开始位置  
        lastY      = 0,//结束位置
        YN         = false,
        bBtn       = true;//判断滚动条上滚还是下滚

        $container.mouseover(function(){
            if ( $contanr.height() > $container.height() ) {
                $conScroll.show();
                //初始化滚动条的高度
                   $sroll.height($container.height()*$conScroll.height()/$contanr.height());
                //添加拖动事件
                addEvent($sroll[0],'mousedown',mouseDown);
                //添加滚动条事件
                addEvent($contanr[0],'DOMMouseScroll',mouseMove);
                addEvent($conScroll[0],'DOMMouseScroll',mouseMove);
                $contanr[0].onmousewheel = MouseScr;
                $conScroll[0].onmousewheel = MouseScr;
            }else{
                $contanr.css({'top':0});
                $sroll.css({'top':0});
            }
        });

        $container.mouseout(function(){
            $conScroll.hide();
        });

        function mouseDown(e){
            startY = e.clientY - this.offsetTop;
            this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象
            console.log(startY);
            addEvent(document,'mousemove',mouseMove);
            addEvent(document,'mouseup',mouseUp);
            return false;
        }

        function mouseMove(e){
            var maxVal = $conScroll.height() - $sroll.height();//最大值
            this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象
            lastY = e.clientY - startY;
            lastY = lastY < 0 ? 0 :lastY;
            lastY = lastY > maxVal ? maxVal : lastY;

            $sroll.css({'top':lastY+'px'});
            $contanr.css({'top':-$conScroll.height()*lastY/$sroll.height()});
            return false;
        }

        function mouseUp(){
            console.log('取消事件');
            removeEvent(document,'mousemove',mouseMove);
            removeEvent(document,'mouseup',mouseUp);
            return false;
        }

        function MouseScr(ev){
            var ev = ev || window.event,
              TopY = 0;
            if(ev.detail){
                bBtn = ev.detail>0  ?  true : false;
            }
            else{
                bBtn = ev.wheelDelta<0  ?  true : false;
            }
            if(bBtn){   //下
                TopY = $contanr.position().top-10;
            }
            else{  //上
                TopY = $contanr.position().top+10;
            }
            var maxTop = $contanr.outerHeight()-$container.outerHeight();
            TopY = TopY > 0 ? 0 : TopY;
            TopY = TopY < -maxTop ? -maxTop : TopY;

            $contanr.css({'top':TopY+'px'});
            $sroll.css({'top':$sroll.height()*Math.abs(TopY)/$conScroll.height()+'px'});

            if(ev.preventDefault){
                ev.preventDefault();
            }
            else{
                return false;
            }
        }
}
//ScorllTop end!

//拖拽活动层,拖拽的区域,活动的区域，最大活动区域，默认是window
function dragConFun(obj){
    var $dragDo  = obj.dragObj,//拖拽触发点
        $dragCon = obj.activeObj,//拖拽的大容器
        $dragMax = obj.maxCon || $(window),//最大的容器,默认是window

        //拖拽容器的大小
        dragWidth  = $dragCon.outerWidth(),//拖拽容器的
        dragHeight = $dragCon.outerHeight(),
        //最大活动范围
        maxWidth   = $dragMax.width() - dragWidth,
        maxHeight  = $dragMax.height() - dragHeight,
        //操作变量
        startX     = 0,
        startY     = 0,
        
        a;

    addEvent($dragDo[0],'mousedown',mouseDoun);

    function mouseDoun(e){
        startX = e.clientX - $dragCon[0].offsetLeft;
        startY = e.clientY - $dragCon[0].offsetTop;
        this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象

        $("body").css({
            'cursor':"move"
        });
        addEvent(document,'mousemove',mouseMove);
        addEvent(document,'mouseup',mouseUp);
        return false;
    };

    function mouseMove(e){
        var endX       = 0,
            endY       = 0;

        endX = e.clientX - startX;
        endY = e.clientY - startY;
        endX = endX < 0 ? 0 : endX;
        endX = endX > maxWidth ? maxWidth : endX;
        endY = endY < 0 ? 0 : endY;
        endY = endY > maxHeight ? maxHeight : endY;

        $dragCon.css({
            'left':endX,
            'top':endY
        });
        return false;
    };

    function mouseUp(){
        $("body").css({
            'cursor':"auto"
        });
        removeEvent(document,'mousemove',mouseMove);
        removeEvent(document,'mouseup',mouseUp);
        return false;
    };

    if (obj.clickother) {
        //非目标区域，隐藏
        $(document).mouseup(function(e){
            var _con = $dragCon;   // 设置目标区域
            if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
              $dragCon.hide();
           }
        });
    };
        
}//dragConFun end!

//添加监听事件
function addEvent( obj, type, fn ) { 
    if ( obj.attachEvent ) { 
        obj['e'+type+fn] = fn; 
        obj[type+fn] = function(){obj['e'+type+fn]( window.event );} 
        obj.attachEvent( 'on'+type, obj[type+fn] ); 
    } else{
        obj.addEventListener( type, fn, false ); 
    } 
        
} 
//移除监听事件
function removeEvent( obj, type, fn ) { 
    if ( obj.detachEvent ) { 
        obj.detachEvent( 'on'+type, obj[type+fn] ); 
        obj[type+fn] = null; 
    } else {
        obj.removeEventListener( type, fn, false ); 
    }
}