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

　　推荐阅读

　　jquery写个checkbox——类似邮箱全选功能

以前用原生 JS 写过 checkbox——类似邮箱全选功能，点击这里。最近在学习jquery，今天抽空用jquery 写个checkbox——类似邮箱全选功能。 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta c>>>详细阅读

本文标题：js 自制滚动条的小例子

地址：http://www.17bianji.com/kaifa2/JS/22219.html

 1/2    1