主页 / 网络编程 /

jQuery自定义滚动条完整实例

网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了jQuery自定义滚动条,以完整实例形式分析了jQuery响应scroll事件及鼠标事件实现滚动条效果的相关技巧,需要的朋友可以参考下

本文实例讲述了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(ratesmallHeight);
        scrollbar.height(h);
        var offset = box.offset()
        var offsetT = offset.+1;
        scrollbar.mousedown(function(e){
          var divOffsetT = scrollbar.offset().;
          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(bigHeightrate2-smallHeight);
            content.css("",-contentH+"px");
            scrollbar.css("",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; : 0; left: 5px;}
      #div3{ width: 10px; position: absolute; : 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正则表达式定义（语法）总结

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by