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,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的滚动效果就知道了，右边的拉动滚动块时候，体验效果好差，很卡，而左边的就流畅多了。

因为很卡，我就又上网看了一下别人的代码，然后把根据别人的思路把代码改了一下，就有了左边那个绿色的那个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;
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);
}
}

}());

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

比较了一下两个的代码，其实修改的不多，就有一点很大的不同，流畅的那一个（左边绿色那一个）多了这个东西——setCapture、releaseCapture。

具体是怎样的，再研究一下先。