javaScript中自定义滚动条二
完整代码：（代码只是面向功能，后期有待优化，一写细节的完善）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #parent{ height:30px; width:400px; background:#ccc; position:relative; } #son{ height:30px; width:30px; background:red; position:absolute; cursor:pointer; } #demo{ height:150px; width:400px; background:green; position:relative; overflow:hidden; } #content{ position:absolute; } </style> </head> <body> <div id="parent"> <div id="son"> </div> </div> <div id="demo"> <div id="content"> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测试数据<br /> 测试数据测试数据测试数据测over<br /> </div> </div> </body> <script type="text/javascript"> //接下来，我们就来做这个滚动条的效果滴呀； window.onload=function (){ var parent=document.getElementById("parent"); var son=document.getElementById("son"); var demo=document.getElementById("demo"); var content=document.getElementById("content"); //同样，我们可以通过键盘来控制滑块的移动滴呀 son.onmousedown=function (ev){ //这里我们只是拖动x上的改变； var e=ev || event; var relativeX=e.clientX-son.offsetLeft; document.onmousemove=function (ev){ var e=ev || event; var x=e.clientX-relativeX; // var y=e.clientY-relativeY; //限制范围了；这里来显示他们的边界滴 呀 if(x<0){ x=0; }else if(x>(parent.offsetWidth-son.offsetWidth)){ x=parent.offsetWidth-son.offsetWidth; } son.style.left=x+'px'; var percent=Math.Round(parentFloat(x/(parent.offsetWidth-son.offsetWidth))); document.title=percent; //demo 150 //content 600 //这样一计算就分成了四份； content.style.top=-((content.offsetHeight-demo.offsetHeight)*percent)+'px'; } document.onmouseup=function (){ document.onmousemove=null; document.onmouseup=null; if(son.setCaptrue!=undefined){ son.releaseCaptrue(); } } //当然也要考虑到我们避免“选择文字的”bug if(son.setCaptrue!=undefined){ son.setCaptrue(); } return false; } } </script> </html>
最总效果：
