10
2015
01

js+div 模拟滚动条兼容性GOOGLE浏览器

[html] 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

  2. <html xmlns="http://www.w3.org/1999/xhtml">  

  3. <head>  

  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

  5. <title>--</title>  

  6. <style>  

  7. /*主窗*/  

  8. #Scroll{width:200px;height:400px;background:#f8f8f8}  

  9. /*左边内容区*/  

  10. #ScroLeft{float:left;height:100%;width:190px;overflow:hidden}  

  11. /*滚动条背景*/  

  12. #ScroRight{position:relative;float:right;height:100%;width:10px;background:#F1F1F1;overflow:hidden;}  

  13. /*滚动条*/  

  14. #ScroLine{position:absolute;z-index:1;top:0px;left:0px;width:100%;height:20px;overflow:hidden;background:#666666}  

  15. </style>  

  16. </head>  

  17. <script>  

  18. var Scrolling=false;  

  19. function $(o){return document.getElementById(o)}  

  20. function ScroMove(){Scrolling=true}  

  21. document.onmousemove=function(e){if(Scrolling==false)return;ScroNow(e)}  

  22. document.onmouseup=function(e){Scrolling=false}  

  23. function ScroNow(event){  

  24. var event=event?event:(window.event?window.event:null);  

  25. var Y=event.clientY-$("Scroll").getBoundingClientRect().top-$("ScroLine").clientHeight/2;  

  26. var H=$("ScroRight").clientHeight-$("ScroLine").clientHeight;  

  27. var SH=Y/H*($("ScroLeft").scrollHeight-$("ScroLeft").clientHeight);  

  28. if (Y<0)Y=0;if (Y>H)Y=H;  

  29. $("ScroLine").style.top=Y+"px";  

  30. $("ScroLeft").scrollTop=SH;  

  31. }  

  32. function ScrollWheel(){  

  33. var Y=$("ScroLeft").scrollTop;  

  34. var H=$("ScroLeft").scrollHeight-$("ScroLeft").clientHeight;  

  35. if (event.wheelDelta >=120){Y=Y-80}else{Y=Y+80}  

  36. if(Y<0)Y=0;if(Y>H)Y=H;  

  37. $("ScroLeft").scrollTop=Y;  

  38. var SH=Y/H*$("ScroRight").clientHeight-$("ScroLine").clientHeight;  

  39. if(SH<0)SH=0;  

  40. $("ScroLine").style.top=SH+"px";  

  41. }  

  42. </script>  

  43. <body>  

  44. <div id="Scroll" onselectstart="return false" onmousewheel="ScrollWheel()"><div id="ScroLeft">  

  45.   

  46. 内容1111<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>  

  47. 内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>  

  48. 内容<br>内容<br>内容<br>内容<br>内容5555<br>内容<br>内容<br>内容<br>内容<br>  

  49. 内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>  

  50. 内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容0000<br>  

  51.   

  52. </div><div id="ScroRight" onclick="ScroNow(event)"><div id="ScroLine" OnMouseDown="ScroMove()"></div></div></div>  



« 上一篇下一篇 »

评论列表:

1.武汉网站优化  2015/7/31 19:42:02 回复该留言
都是代码啊

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。