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. 用xshell5连接虚拟机，显示Could not connect to '192.168.3.128' (port 22): Connection failed.

    原因:虚拟机上没有安装或者没有启动ssh 解决: 1.安装sshserver sudo apt-get install openssh-server 2.启动ssh服务 sudo service ss ...

  2. JSOI建筑抢修 （贪心+堆）

    先按照T2从小到大排序,然后进行贪心. 第i个任务能完成的条件是,sigma(T1[j])+T1[i]<=T2[i] ( j 为之前所选的任务) 如果这个任务不能完成,若max(T1[j]) & ...

  3. Linux ANSI 乱码问题

    原帖http://blog.chinaunix.net/u/24624/showart_184609.html Windows 到 linux 解决samba-3.x客户端中文乱码问题 dos cha ...

  4. 智能家居APP开发

    智能家居APP开发 APP开发技术qq交流群:347072638 前言,随着智能硬件设备的流行,智能家居開始红火,智能家居就是家用电器的智能化.包含智能锁,灯,空调,灯,音箱等等,移动设备通过WIFI ...

  5. Python3基础（一） Hello World

    对于新手一般会遇到一个问题:学习Python 2还是Python 3呢? 对于我个人而言,我是个完全的新手,没有历史包袱,所以我直接学习Python 3.我相信在未来几年,Python 3会逐步取代P ...

  6. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  7. Java程序执行超时——Future接口介绍

    在Java中,如果需要设定代码执行的最长时间,即超时,可以用Java线程池ExecutorService类配合Future接口来实现. Future接口是Java标准API的一部分,在java.uti ...

  8. java-javabean Introspector的应用

    Introspector 类为通过工具学习有关受目标 Java Bean 支持的属性.事件和方法的知识提供了一个标准方法. 对于这三种信息,Introspector 将分别分析 bean 的类和超类, ...

  9. Unix域套接字（Unix Domain Socket）介绍【转】

    本文转载自:http://blog.csdn.net/roland_sun/article/details/50266565 版权声明:本文为博主原创文章,未经博主允许不得转载. 在Linux系统中, ...

  10. go语言笔记——还是大爱的我的python，开发效果高，tornado的性能也很不错

    Go 自带的工具集主要使用脚本和 Go 语言自身编写的,目前版本的 Go 实现了以下三个工具: go install 是安装 Go 包的工具,类似 Ruby 中的 rubygems.主要用于安装非标准 ...