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. PHP与WCF第一次亲密接触

    接触PHP第二天,要求PHP访问WCF服务 着实痛苦,无从下手啊. 在网上查了很多资料知道PHP访问WCF很方便 <?php $client = new SoapClient ( 'http:/ ...

  2. 非常适合新手的jq/zepto源码分析06 -- 事件模型

    复习下事件的有关内容: 1.现在用的绑定/删除: obj.addEventListener(type,fn,false) obj.removeEventListener(type) obj.attac ...

  3. ubuntu 安装 swift

    第一步 安装mysql和mysql的python支持 apt-get install python-mysqldb mysql-server 第二步 配置mysql vim /etc/mysql/my ...

  4. ASM instance正常启动，但是用sqlplus 连不上的问题

    首先,这是oracle 11g 11.0.2.3 版本.这是一个神奇的问题. asm instance启动正常,但是用sqlplus 去连接的时候会显示如下: [oracle@racnode1 ~]$ ...

  5. NetCore +EFCore+SqlServer根据数据库生成实体类到项目中

    转载自:https://www.cnblogs.com/yangjinwang/p/9516988.html 1.点击“工具”->“NuGet包管理器”->“程序包管理器控制台” 分别安装 ...

  6. Jquery Mac OS Desktop项目想启动

    想用Jquery做个MAC OS Desktop应用框架,欢迎大家提建议.

  7. CoffeeScript里的字符串插值

    拼接字符串是我们常干的事情.与其用很多的 "" + "",不如用一下字符串插值,可读性好些. 方法是在字符串中加入#{ 变量.表达式.函数等} getOther ...

  8. Mongo性能测试-python脚本

    单线程 500+w条数据,插入时间:1小时,13分钟. 脚本: [root@10 hurl]# cat insert-mongo2.py #!/usr/bin/env python #coding=u ...

  9. 文章编辑器 文本替换 操作dom 发帖 富文本 今日头条发布富文本的实现 键盘化的html

    js  修改  iframe it=document.getElementById('ueditor_0').contentWindow.document.getElementsByTagName(& ...

  10. python 循环高级用法 [expression for x in X [if condition] for y in Y [if condition] ... for n in N [if condition] ]按照从左至右的顺序，分别是外层循环到内层循环

    高级语法 除了像上面介绍的 [x ** 2 for x in L] 这种基本语法之外,列表推导式还有一些高级的扩展. 4.1. 带有if语句 我们可以在 for 语句后面跟上一个 if 判断语句,用于 ...