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. Linux/windows查看设置环境变量指令

    一.Linux: 1.查看所有环境变量的指令 方法1:$:export (export命令作用是显示.设置或删除linux环境变量:) 方法2:$:env 2.查看某个指定的环境变量 方法1:$:ex ...

  2. Extended symmetrical multiprocessor architecture

    An architecture for an extended multiprocessor (XMP) computer system is provided. The XMP computer s ...

  3. code wars quiz: toInteger

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

  4. 30、Java并发性和多线程-阿姆达尔定律

    以下内容转自http://ifeve.com/amdahls-law/: 阿姆达尔定律可以用来计算处理器平行运算之后效率提升的能力.阿姆达尔定律因Gene Amdal 在1967年提出这个定律而得名. ...

  5. 墨卡托坐标与LBS应用

    今天了解到这边的LBS应用,一般用的是墨卡托坐标. 也就是商品库的商品入库的时候,会根据输入,使用百度地图提供的一个API,来转换成一个墨卡托坐标. 然后用户流量过来的时候,会带来历史坐标,和当前坐标 ...

  6. [Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容

    原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cord ...

  7. GPU 编程入门到精通（三）之 第一个 GPU 程序

    博主因为工作其中的须要.開始学习 GPU 上面的编程,主要涉及到的是基于 GPU 的深度学习方面的知识,鉴于之前没有接触过 GPU 编程,因此在这里特地学习一下 GPU 上面的编程.有志同道合的小伙伴 ...

  8. LeetCode 172. Factorial Trailing Zeroes （阶乘末尾零的数量）

    Given an integer n, return the number of trailing zeroes in n!. Note: Your solution should be in log ...

  9. Server Tomcat v8.0 Server at localhost failed to start.

    怎么办? 查资料的话别人会告诉你须要删除一个东西.这是一种方法.可是你的错误并不是通过这种方法能够解决. 比方像我 <url-pattern>login</url-pattern&g ...

  10. HBase行锁原理及实现

    请带着例如以下问题阅读本文. 1.什么是行锁? 2.HBase行锁的原理是什么? 3.HBase行锁是怎样实现的? 4.HBase行锁是怎样应用的? 一.什么是行锁? 我们知道.数据库中存在事务的概念 ...