寫了個js自製捲軸，首先，先看一下demo（點這裡） 先
有兩個demo，右邊那個黑色那個，是我一開始寫的比較膚淺的程式碼：
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
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();
}
}
}());
這麼說它膚淺了，比較一下兩個demo的滾動效果就知道了，右邊的拉動滾動塊時候，體驗效果好差，很卡，而左邊的就平滑多了。
因為很卡，我就又上網看了一下別人的代碼，然後把根據別人的思路把代碼改了一下，找到了左邊那個綠色的那個demo，很明顯，效果好了很多，代碼：
