jQuery自定义滚动条完整实例

2019-11-20 10:50:22

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：jQuery实现本地预览上传图片功能

下一篇：javascript正则表达式定义（语法）总结