快捷導(dǎo)航

js 自制滾動(dòng)條的小例子

更新時(shí)間：2013年03月16日 23:01:08 作者：

js 自制滾動(dòng)條的小例子，需要的朋友可以參考一下

寫了個(gè)js自制滾動(dòng)條，首先，先看一下demo（點(diǎn)擊這里）先

有兩個(gè)demo，右邊那個(gè)黑色那個(gè)，是我一開始寫的比較膚淺的代碼：

var scrollself=(function(){

    var scrollblock, //滾動(dòng)塊
        scrollcontent, //被滾動(dòng)的內(nèi)容
        scrollbar,    //滾動(dòng)條
        scrollpanel,    //滾動(dòng)內(nèi)容的滾動(dòng)區(qū)域
        cdistance, //滾動(dòng)內(nèi)容要滾動(dòng)的距離
        bdistance,    //滾動(dòng)塊要滾動(dòng)的距離
        minuTop, //滾動(dòng)條頭尾剩下的空白
        cTop,    //滾動(dòng)內(nèi)容的top
        startY=0,    //滾動(dòng)動(dòng)作開始初鼠標(biāo)的位置
        bTop=0,    //滾動(dòng)動(dòng)作開始初滾動(dòng)塊的top
        isDrag=false; //是否拉動(dòng)滾動(dòng)塊

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');

之所以說它膚淺，比較一下兩個(gè)demo的滾動(dòng)效果就知道了，右邊的拉動(dòng)滾動(dòng)塊時(shí)候，體驗(yàn)效果好差，很卡，而左邊的就流暢多了。

因?yàn)楹芸?，我就又上網(wǎng)看了一下別人的代碼，然后把根據(jù)別人的思路把代碼改了一下，就有了左邊那個(gè)綠色的那個(gè)demo，很明顯，效果好了很多，代碼：

復(fù)制代碼代碼如下:

var scroll=(function(){

    var scrollblock, //滾動(dòng)塊
        scrollcontent, //被滾動(dòng)的內(nèi)容
        scrollbar,    //滾動(dòng)條
        scrollpanel,    //滾動(dòng)內(nèi)容的滾動(dòng)區(qū)域
        cdistance, //滾動(dòng)內(nèi)容要滾動(dòng)的距離
        bdistance,    //滾動(dòng)塊要滾動(dòng)的距離
        minuTop, //滾動(dòng)條頭尾剩下的空白
        cTop,    //滾動(dòng)內(nèi)容的top
        startY=0,    //滾動(dòng)動(dòng)作開始初鼠標(biāo)的位置
        bTop=0;    //滾動(dòng)動(dòng)作開始初滾動(dòng)塊的top

    function doDrag(event){
        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';

}

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

            scrollblock.onmousemove=doDrag;
            scrollblock.onmouseup=stopDrag;
            scrollblock.releaseCapture();
        }else{
            document.removeEventListener("mousemove",doDrag,true);
            document.removeEventListener("mouseup",stopDrag,true);
        }
        scrollblock.onmousemove=null;
        scrollblock.onmouseup=null;
    }
    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;
            scrollblock.onmousedown=mouseDown;
            enclose(scrollpanel,scrollcontent,scrollbar,scrollblock,bdistance,cdistance,minuTop);
        }
    }