jQuery自定义滚动条完整实例

更新时间：2016年01月08日 10:00:15 作者：leo列

这篇文章主要介绍了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(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实现手势解锁密码特效
这篇文章主要为大家详细介绍了jQuery实现手势解锁密码特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
jQuery操作input值的各种方法总结
这篇文章主要介绍了jQuery操作input值的各种方法总结，有需要的朋友可以参考一下
2013-11-11
jquery中JSON的解析方式
用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明
2015-03-03
jQuery ready函数滥用分析
jQuery的ready函数为我们编写打开页面时运行的脚本提供了方便，让我们不必再关注什么window.onLoad之类的事件，但是最近发现自己之前写的代码有点滥用这个函数了。
2011-02-02
jQuery图片轮播插件——前端开发必看
这篇文章主要介绍了jQuery图片轮播插件代码的相关资料,在各大网站都可以简单图片轮播效果，非常实用，需要的朋友可以参考下
2016-05-05
jQuery实现对无序列表的排序功能(附demo源码下载)
这篇文章主要介绍了jQuery实现对无序列表的排序功能,涉及jQuery与javascript常见的文本操作函数与sort排序函数的相关使用方法,具有一定参考借鉴价值,需要的朋友可以参考下
2016-06-06
基于jquery实现点击左右按钮图片横向滚动
点击左右按钮图片横向滚动jquery，一次滚动四个，图片滚动完成，自动回到第一个版面，效果相当不错，感兴趣的前端工程师们可以参考下
2013-04-04
如何使用jQuery操作Cookies方法解析
这篇文章主要介绍了如何使用jQuery操作Cookies方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
jQuery实现强制cookie过期方法汇总
本文是对jquery 强制cookie失效的解决方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
2015-05-05
JQuery实现简单验证码提示解决方案
验证码提示功能在ui界面的登陆及提交窗口中起到了一定的有好作用，极大的提高了用户体验，本文带着这个美好的祝愿为您实现简单验证码提示,需要的朋友可以了解下
2012-12-12

jQuery自定义滚动条完整实例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具