jQuery自定义滚动条完整实例

时间：2021-05-26

本文实例讲述了jQuery自定义滚动条实现方法。分享给大家供大家参考，具体如下：

很多时候，由于美观上的考虑，往往需要自定义各种各样的滚动条，因此，本人做了一个demo

运行效果截图如下：

以下是代码部分：

<html> <head> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script> $(function(){ //内容高度 var content = $("#div2"); //框的高度 var box = $("#div1"); //自定义的滚动条 var scrollbar = $("#div3"); var scroll=function(content,box,scrollbar){ var bigHeight = content.height(); var smallHeight = box.height(); var rate = smallHeight/bigHeight; var h = Math.floor(rate*smallHeight); scrollbar.height(h); var offset = box.offset() var offsetT = offset.top+1; scrollbar.mousedown(function(e){ var divOffsetT = scrollbar.offset().top; var tempT = e.pageY-divOffsetT; function move(e){ var newH = e.pageY-tempT-offsetT; if(newH<0){ newH=0; }else if(newH>(smallHeight-h)){ newH=smallHeight-h; } var rate2 = (newH+h)/smallHeight; var contentH = Math.floor(bigHeight*rate2-smallHeight); content.css("top",-contentH+"px"); scrollbar.css("top",newH+"px"); } $("body").on("mousemove",move); $("body").mouseup(function(){ $("body").off("mousemove",move); }); }); } scroll(content,box,scrollbar); }); </script> <style> *{ margin:0; padding: 0;} body{ font-size: 12px;} #div1{ width: 200px; height: 300px; margin: 50px auto; position: relative; _overflow: hidden; border: 1px solid #000;} #div2{ width: 180px; position: absolute; top: 0; left: 5px;} #div3{ width: 10px; position: absolute; top: 0; right:5px; background: #000;} </style> </head> <body> <div id="div1"> <div id="div3"></div> <div id="div2"> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> </div> </div> <textarea name="" id="txt" cols="30" rows="10"></textarea> </body></html>

希望本文所述对大家jQuery程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章