有两个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。具体是怎样的，再研究一下先。