js 自制滚动条的小例子

写了个js自制滚动条，首先，先看一下demo（点击这里） 先

有两个demo，右边那个黑色那个，是我一开始写的比较肤浅的代码：

复制代码 代码如下:

var scrollself=(function(){

var scrollblock, //滚动块
        scrollcontent,  //被滚动的内容
        scrollbar,    //滚动条
        scrollpanel,    //滚动内容的滚动区域
        cdistance,  //滚动内容要滚动的距离
        bdistance,    //滚动块要滚动的距离
        minuTop, //滚动条头尾剩下的空白
        cTop,    //滚动内容的top
        startY=0,    //滚动动作开始初鼠标的位置
        bTop=0,    //滚动动作开始初滚动块的top
        isDrag=false;  //是否拉动滚动块

    function prevent(e){

if(e.preventDefault){
            e.preventDefault();
        }
        if(e.stopPropagation){
            e.stopPropagation();
        }
        e.cancelBubble=true;
        e.returnValue=false;
    }

function mouseDown(event){
        isDrag=true;
        event=event||window.event;
        startY=event.clientY;
        bTop=scrollblock.offsetTop;
        cTop=scrollcontent.offsetTop;

// prevent(event);

}

function mouseMove(event){
        if(isDrag){

event=event||window.event;

            var newbTop=event.clientY-startY+bTop,
                newcTop=cTop-(event.clientY-startY)/bdistance*cdistance;

if(newbTop<minuTop){
                newbTop=minuTop;
                newcTop=0;
            }else{
                if(newbTop>bdistance+minuTop){
                    newcTop=-cdistance;
                    newbTop=bdistance+minuTop;
                }
            }

scrollblock.style.top=newbTop+'px';
            scrollcontent.style.top=newcTop+'px';
        }else{
            isDrag=false;
        }

// prevent(event);
    }

function mouseUp(event){

isDrag=false;

// prevent(event);
    }

function addHandler(){
        scrollblock.onmousedown=mouseDown;
        scrollblock.onmousemove=mouseMove;
        scrollblock.onmouseup=mouseUp;
        document.onmouseup=mouseUp;
    }

    return{
        init:function(scrollpanel_id,scrollcontent_id,scrollbar_id,scrollblock_id){
            scrollblock=document.getElementById(scrollblock_id);
            scrollcontent=document.getElementById(scrollcontent_id);
            scrollbar=document.getElementById(scrollbar_id);
            scrollpanel=document.getElementById(scrollpanel_id);
            minuTop=scrollblock.offsetTop;
            cdistance=scrollcontent.offsetHeight-scrollpanel.offsetHeight;
            bdistance=scrollbar.offsetHeight-minuTop*2-scrollblock.offsetHeight;

            enclose(scrollpanel,scrollcontent,scrollbar,scrollblock,bdistance,cdistance,minuTop);
            addHandler();
        }
    }

}());

scrollself.init('scrollpanel2','scrollcontent2','scrollbar2','scrollblock2');

之所以说它肤浅，比较一下两个demo的滚动效果就知道了，右边的拉动滚动块时候，体验效果好差，很卡，而左边的就流畅多了。