js 自製滾動條的小例子_javascript技巧

寫了個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 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 lock_id);
           scrollcontent=document.getElementById (sc rollcontent_id);
           scrollbar=document.getElementById(scrollbar_id);
             minuTop=scrollblock.offsetTop;
            cdistance=sc rollcontent.offsetHeight -scrollpanel.offsetHeight;
            enclose(scrollpanel,scrollcontent,scrollbar,scrollblock,bdistance,croll);   addHandler();
        }
    }


}());

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

這麼說它膚淺了，比較一下兩個demo的滾動效果就知道了，右邊的拉動滾動塊時候，體驗效果好差，很卡，而左邊的就平滑多了。
因為很卡，我就又上網看了一下別人的代碼，然後把根據別人的思路把代碼改了一下，找到了左邊那個綠色的那個demo，很明顯，效果好了很多，代碼：

複製程式碼

程式碼如下：

var scroll=(function(){

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

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

            scrollblock.onmousemove=doDrag;
            scrollblock.onmouseup=stopDrag;
            scrollblock.setCapture();
        }else{
            document.addEventListener("mousemove",doDrag,true);
            document.addEventListener("mouseup",stopDrag,true);
        }

    }

    function doDrag(event){
        event=event||window.event;

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

        if(newbTop newbTop=minuTop;
newcTop=0;
}else if(newbTop>bdistance+minuTop){
            newcTop=-cdistance;
            newbTop=bdistance+minuTop;
        }
        scrollblock.style.top=newbTop+'px';
        scrollcontent.style.top=newcTop+'px';

    }

    function stopDrag(event){
        if(scrollblock.releaseCapture){

           scrollblock.onmousemove=doDrag;
           scroll ture();
        }else{
            文檔.remove EventListener("滑鼠移動",doDrag,true) ;
            document.removeEventListener("mouseup",stopDrag,true);
          scrollblock.onmouseup=null;
    }
    回傳{
        初始化:function(scrollpanel_id,scrollcontent_id,scrollbar_id,scrollblock_id){
             scrollcontent=document.getElementById(scrollcontent_id);
           scrollbar=document.getElementBy Id(scrollbar_id) ;
          scrollpanel=document.getElementById(scrollpanel_id);
         cdistance=scrollcontent.offsetHeight-scrollpanel.offsetHeight;
           bdistance=滾動條.offsetHeight-minuTop*2-scrollblock .offsetHeight;
            rollblock.onmousedown=mouseDown;
                }
    }

}());

scroll.init('scrollpanel','scrollcontent','scrollbar','scrollblock');

比較兩個程式碼，其實修改的差不多了，只要一點點就很多不同的是，流暢的那一個（左邊綠色那一個）做了這個東西－setCapture、releaseCapture。

具體是怎樣的，先研究一下。