寫了個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<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');
之所以說它膚淺，比較一下兩個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<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);
}
}
}());
scroll.init('scrollpanel','scrollcontent','scrollbar','scrollblock');
比較了一下兩個的代碼，其實修改的不多，就有一點很大的不同，流暢的那一個（左邊綠色那一個）多了這個東西——setCapture、releaseCapture。
具體是怎樣的，再研究一下先。