1、核心思想与之前的拖拽盒子是一样的

2、完全将鼠标在盒子中的坐标给滚动条是错的，因为这样会使滚动条顶部立刻瞬间移动到鼠标位置

3、必须在鼠标按下事件时记住鼠标在滚动条内部的坐标，再将鼠标在盒子中的坐标给滚动条时要减去这个相对距离

4、超出部分内容：超出部分移动距离=滚动条需要移动的距离：滚动条移动距离

5、上面公式的意思就是：滚动条移动到了能够移动距离的50%时，超出部分距离也应该移动50%

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.  
  12.         .box {
  13.             width: 250px;
  14.             height: 400px;
  15.             border: 1px solid #ccc;
  16.             border-right: none;
  17.             margin: 150px auto;
  18.             padding: 10px;
  19.             position: relative;
  20.             overflow: hidden;
  21.  
  22.         }
  23.  
  24.         .content {
  25.             width: 250px;
  26.             font: 400 15px "simsun";
  27.         }
  28.  
  29.         .small {
  30.             width: 20px;
  31.             height: 100%;
  32.             background-color: #ccc;
  33.             position: absolute;
  34.             top: 0;
  35.             right: 0;
  36.         }
  37.  
  38.         .scrollBar {
  39.             width: 20px;
  40.             height: 70px;
  41.             background-color: red;
  42.             border-radius: 15px;
  43.             position: absolute;
  44.             top: 0;
  45.             left: 0;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50. <div class="box">
  51.     <div class="content">
  52.         少小离家老大回，乡音未改鬓毛衰<br>
  53.         少小离家老大回，乡音未改鬓毛衰<br>
  54.         少小离家老大回，乡音未改鬓毛衰<br>
  55.         少小离家老大回，乡音未改鬓毛衰<br>
  56.         少小离家老大回，乡音未改鬓毛衰<br>
  57.         少小离家老大回，乡音未改鬓毛衰<br>
  58.         少小离家老大回，乡音未改鬓毛衰<br>
  59.         少小离家老大回，乡音未改鬓毛衰<br>
  60.         少小离家老大回，乡音未改鬓毛衰<br>
  61.         少小离家老大回，乡音未改鬓毛衰<br>
  62.         少小离家老大回，乡音未改鬓毛衰<br>
  63.         少小离家老大回，乡音未改鬓毛衰<br>
  64.         少小离家老大回，乡音未改鬓毛衰<br>
  65.         少小离家老大回，乡音未改鬓毛衰<br>
  66.         少小离家老大回，乡音未改鬓毛衰<br>
  67.         少小离家老大回，乡音未改鬓毛衰<br>
  68.         少小离家老大回，乡音未改鬓毛衰<br>
  69.         少小离家老大回，乡音未改鬓毛衰<br>
  70.         少小离家老大回，乡音未改鬓毛衰<br>
  71.         少小离家老大回，乡音未改鬓毛衰<br>
  72.         少小离家老大回，乡音未改鬓毛衰<br>
  73.         少小离家老大回，乡音未改鬓毛衰<br>
  74.         少小离家老大回，乡音未改鬓毛衰<br>
  75.         少小离家老大回，乡音未改鬓毛衰<br>
  76.         少小离家老大回，乡音未改鬓毛衰<br>
  77.         少小离家老大回，乡音未改鬓毛衰<br>
  78.         少小离家老大回，乡音未改鬓毛衰<br>
  79.         少小离家老大回，乡音未改鬓毛衰<br>
  80.         少小离家老大回，乡音未改鬓毛衰<br>
  81.         -----------最后-----------<br>
  82.     </div>
  83.     <div class="small">
  84.         <div class="scrollBar"></div>
  85.     </div>
  86.     <script>
  87.  
  88.         //点击滚动条，拖拽移动
  89.         var box = document.getElementsByTagName("div")[0];
  90.         var content = box.children[0];
  91.         var small = box.children[1];
  92.         var scrollBar = small.children[0];
  93.         scrollBar.onmousedown = function (ev) {
  94.             ev = ev || window.event;
  95.             var pageY = ev.pageY || scroll().top + ev.clientY;
  96.             var scrollBarY = pageY - scrollBar.offsetTop - box.offsetTop;//鼠标在scrollBar中的位置
  97.             document.onmousemove = function (ev) {
  98.                 ev = ev || window.event;
  99.                 //鼠标在small中的坐标，其实就是在box中的坐标（只取y值）
  100.                 var pageY = ev.pageY || scroll().top + ev.clientY;
  101.                 var boxY = pageY - box.offsetTop;
  102.                 var y = boxY - scrollBarY;
  103.                 if (y < 0) {
  104.                     y = 0;
  105.                 }
  106.                 if (y > small.offsetHeight - scrollBar.offsetHeight) {
  107.                     y = small.offsetHeight - scrollBar.offsetHeight;
  108.                 }
  109.                 scrollBar.style.top = y + "px";
  110.                 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  111.  
  112.                 //保证内容联动，滚动条拉到最下面，要保证内容部分显示底部
  113.                 //滚动条最大移动距离：
  114.                 var scrollBarDistance = small.offsetHeight - scrollBar.offsetHeight;//滚动条可以滚动多长
  115.                 var overContent = box.offsetHeight - 2 - 10 - content.offsetHeight;//超出部分
  116.                 //scrollBarDistance/y=overContent/u;
  117.                 var u = overContent * y / scrollBarDistance;
  118.                 console.log(u);
  119.                 content.style.marginTop = u + "px";
  120.  
  121.             }
  122.         }
  123.         document.onmouseup = function () {
  124.             document.onmousemove = null;
  125.         }
  126.  
  127.         function scroll() {
  128.             return {
  129.                 "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
  130.                 "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
  131.             };
  132.         }
  133.     </script>
  134. </div>
  135. </body>
  136. </html>

JS——滚动条的更多相关文章

  1. jquery.nicescroll.min.js滚动条使用方法

    jquery.nicescroll.min.js滚动条使用方法,Nicescroll 是制作自定义滚动条的jq插件.支持div,iframe,html等使用,兼容IE7-8,safari,firefo ...

  2. python实例编写（4）--js,滚动条，cookie，验证码，获取特定属性的元素，实现原理

    一.调用js 执行方法:execute_script(script,*args) 场景一:在页面上直接执行调用js 场景二:在定位的某个元素上执行调用js 如:掩藏文字(提示插件 tooltip设置淡 ...

  3. jquery.nicescroll.min.js滚动条插件的用法

    1.jquery.nicescroll.min.js源码 /* jquery.nicescroll 3.6.8 InuYaksa*2015 MIT http://nicescroll.areaaper ...

  4. JS滚动条下拉事件

    <script type="text/javascript"> window.onscroll = function(){ var t = document.docum ...

  5. js滚动条

    /*滚动条在Y轴上的滚动距离*/function ScrollTop(){ var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; i ...

  6. js 滚动条

    <script type="text/javascript"> //文档高度1016 包含隐藏的margin和padding 实际1000 //文档1000 //窗口高 ...

  7. JS 滚动条事件

    当滚动条滚动到最底部出发事件: $(window).scroll(function(){ if($(document).height()-$(this).scrollTop()-$(this).hei ...

  8. 原生JS滚动条位置处理

    // 滚动条位置 var scrollPosition = { // 位置 result: 0, // 监听位置 rememberPosition: function () { var type = ...

  9. js滚动条滚动到某个元素位置

    scrollTo(0,document.getElementById('xxx').offset().top);

随机推荐

  1. [Usaco2016 Open]Diamond Collector

    题目描述 Bessie the cow, always a fan of shiny objects, has taken up a hobby of mining diamonds in her s ...

  2. code wars quiz: toInteger

    Your task is to program a function which converts any input to an integer. Do not perform rounding, ...

  3. 学一学书里的django是怎么写views.py的

    他山之石,可以攻玉嘛. 好的习惯有时也是学别人来养成的. 外国人的编码习惯,学啊. from django.core.urlresolvers import reverse_lazy from dja ...

  4. Linux服务管理（Ubuntu服务管理工具sysv-rc-conf）（转）

    Linux运行级别 Linux系统任何时候都运行在一个指定的运行级上,并且不同的运行级的程序和服务都不同,所要完成的工作和要达到的目的都不同,系统可以在这些运行级之间进行切换,以完成不同的工作. 运行 ...

  5. 线程调度策略SCHED_RR（轮转法）和SCHED_FIFO（先进先出）之对照

    我们在用pthread创建线程时,能够指定调度策略policy--SCHED_OTHER(默认).SCHED_RR和SCHED_FIFO.这里TALK一下两个实时策略--SCHED_RR和SCHED_ ...

  6. Domino V8 在 UNIX/Linux 平台上的安装及其常见问题

    在 IBM Bluemix 云平台上开发并部署您的下一个应用. 开始您的试用 Domino V8 的安装需求 Domino V8 可以支持多种平台和操作系统,表1 列出了其支持的各种 UNIX/Lin ...

  7. MyBatis參数格式化异常解决方式：MyBatisSystemException:

    MyBatis參数格式化异常解决方式:MyBatisSystemException: 问题:今天使用MyBatis开发查询功能时,前台传入查询条件明明是String类型,到后台就报错,提示格式化数值错 ...

  8. python实现自动重启本程序的方法 技术的漩涡

    python实现自动重启本程序的方法 http://www.jb51.net/article/69174.htm import requests, time url_l = []with open(' ...

  9. IDEA maven不能下载源码:" can not download source"问题

    用IDEA无法下载源码,可以在命令行项目根目录下,执行如下命令 :mvn dependency:resolve -Dclassifier=sources下载 也可以在idea设置中设置为自动下载源码

  10. Android Studio笔记

    1. toolbar xml: <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:la ...