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

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

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .box {

            width: 250px;

            height: 400px;

            border: 1px solid #ccc;

            border-right: none;

            margin: 150px auto;

            padding: 10px;

            position: relative;

            overflow: hidden;

        }

        .content {

            width: 250px;

            font: 400 15px "simsun";

        }

        .small {

            width: 20px;

            height: 100%;

            background-color: #ccc;

            position: absolute;

            top: 0;

            right: 0;

        }

        .scrollBar {

            width: 20px;

            height: 70px;

            background-color: red;

            border-radius: 15px;

            position: absolute;

            top: 0;

            left: 0;

        }

    </style>

</head>

<body>

<div class="box">

    <div class="content">

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        少小离家老大回，乡音未改鬓毛衰<br>

        -----------最后-----------<br>

    </div>

    <div class="small">

        <div class="scrollBar"></div>

    </div>

    <script>

        //点击滚动条，拖拽移动

        var box = document.getElementsByTagName("div")[0];

        var content = box.children[0];

        var small = box.children[1];

        var scrollBar = small.children[0];

        scrollBar.onmousedown = function (ev) {

            ev = ev || window.event;

            var pageY = ev.pageY || scroll().top + ev.clientY;

            var scrollBarY = pageY - scrollBar.offsetTop - box.offsetTop;//鼠标在scrollBar中的位置

            document.onmousemove = function (ev) {

                ev = ev || window.event;

                //鼠标在small中的坐标，其实就是在box中的坐标（只取y值）

                var pageY = ev.pageY || scroll().top + ev.clientY;

                var boxY = pageY - box.offsetTop;

                var y = boxY - scrollBarY;

                if (y < 0) {

                    y = 0;

                }

                if (y > small.offsetHeight - scrollBar.offsetHeight) {

                    y = small.offsetHeight - scrollBar.offsetHeight;

                }

                scrollBar.style.top = y + "px";

                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

                //保证内容联动，滚动条拉到最下面，要保证内容部分显示底部

                //滚动条最大移动距离：

                var scrollBarDistance = small.offsetHeight - scrollBar.offsetHeight;//滚动条可以滚动多长

                var overContent = box.offsetHeight - 2 - 10 - content.offsetHeight;//超出部分

                //scrollBarDistance/y=overContent/u;

                var u = overContent * y / scrollBarDistance;

                console.log(u);

                content.style.marginTop = u + "px";

            }

        }

        document.onmouseup = function () {

            document.onmousemove = null;

        }

        function scroll() {

            return {

                "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,

                "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft

            };

        }

    </script>

</div>

</body>

</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. [K/3Cloud] 表单python脚本使用QueryService的做法

    听说有些朋友想在表单里做自定义的界面数据处理,一般来说写个表单插件会很容易解决这类问题.但是鉴于C#插件开发的不便性和实施搭建开发环境的麻烦,在现场做C#开发可能会不太方便(没部署开发环境之类的问题) ...

  2. [K3Cloud2.0]如何解决创建管理中心失败的问题

    标题有点大,实际上,Cloud2.0产品质量还是顶呱呱的,至于在安装使用过程中出现的这个管理中心无法创建的问题,实际上是与我的网络环境有关,下面讲一下我的网络环境: 开发团队目前所在网段:10.30. ...

  3. JAVA内存模型与线程以及volatile理解

    Java内存模型是围绕在并发过程中如何处理原子性.可见性.有序性来建立的. 一.主内存与工作内存 Java内存模型主要目标是在虚拟机中将变量存储到内存和从内存中取出变量.这里的变量包括:实例字段.静态 ...

  4. 编程算法 - 求1+2+...+n(函数继承) 代码(C++)

    求1+2+...+n(函数继承) 代码(C++) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 求1+2+...+n, 要求不能使用乘除法\for\whi ...

  5. 怎样一步步用D3画多曲线

    Bar Chart: http://bl.ocks.org/mbostock/3885304 这是一个画柱状图的基本形式. Axis是数轴: tickets是数轴上的标尺.tickets第二个參数% ...

  6. Android资源文件命名规范

    在复杂Android应用的开发中,资源文件的规范命名非常重要,能帮助设计人员和开发人员减小沟通成本.资源的名字尽量力求准确,可以适当长一些,但换回的价值是值得的. 关于WCC的Android开发,资源 ...

  7. CVPR2015一些文章整理

    简单看了一部分CVPR2015的文章.整理了一下. 当中我决定把精彩的文章加粗. 主要是认为有些文章仅仅读了一遍,没有发现非常多非常有道理的point(虽然我承认他们的工作都花了非常大的功夫.可是没有 ...

  8. JPA学习笔记（13）——查询缓存

    使用hibernate的查询缓存 运行下面代码: String jpql = "FROM User u WHERE u.id = ?"; Query query = entityM ...

  9. Generic Interfaces (C# Programming Guide)

    https://msdn.microsoft.com/en-us/library/kwtft8ak(v=vs.140).aspx It is often useful to define interf ...

  10. 浅谈JVM内存模型

    JAVA虚拟机在执行JAVA程序的时候,会把它管理的内存分成若干不同的数据区域,每个区域都有各自的用途.目前大致把JVM内存模型划分为五个区域:程序计数器,虚拟机栈,本地方法栈,堆和方法区. 程序计数 ...