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. springmvc 日期转换器

    package com.xxx.common.controller.converter; import org.joda.time.DateTime; import org.joda.time.for ...

  2. spring-cloud-starter-hystrix（断路器）服务不通或者调用失败后的错误处理和回调

    雪崩效应 在微服务架构中通常会有多个服务层调用,大量的微服务通过网络进行通信,从而支撑起整个系统.各个微服务之间也难免存在大量的依赖关系.然而任何服务都不是100%可用的,网络往往也是脆弱的,所以难免 ...

  3. ScrollView双击图片定点放大

    直接先说原理吧--原理:利用了scrollview的回调函数(如下)以及scrollview自己内部的一些缩放规则(其实我也还没弄清楚具体scrollview干了什么事),只是知道了它可以怎么做-_- ...

  4. Solidworks如何修改单位

    文档属性-单位-修改成mm                                  

  5. 自然语言处理中的Attention Model：是什么及为什么

    /* 版权声明:能够随意转载.转载时请标明文章原始出处和作者信息 .*/ author: 张俊林 要是关注深度学习在自然语言处理方面的研究进展,我相信你一定听说过Attention Model(后文有 ...

  6. apache在windows下的命令安装与报错解决

    1.在windows下能够通过执行apache的exe文件就能够,但当我们打包的时候,就须要命令来安装apache.apache在windows下用命令下的安装为: apache.exe -k ins ...

  7. linux驱动之LED驱动_1

    步骤: 1.框架 2.完好硬件的操作: a.看原理图.引脚 b.看2440手冊 c.写代码: IO口须要用ioremap映射 我的板子电路例如以下所看到的 1.配置GPBCON 寄存器,配置输出   ...

  8. cached

    /proc/sys/vm/ 关于Linux cached内存简析 - CSDN博客 http://blog.csdn.net/fox_hacker/article/details/41351687 [ ...

  9. js添加页面元素

    js动态创建html元素需要使用到下面这些常见的js方法. getElementById();//返回带有指定 ID 的元素. getElementsByTagName();//返回包含带有指定标签名 ...

  10. JavaScript Patterns 2.3 For loops

    HTMLCollections are objects returned by DOM methods such as: • document.getElementsByName() • docume ...