前端原生框架自定义滑动条第二种逻辑

HTML结构：

   <div class="box">

        <div id="content">

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。

            床前明月光，疑是地上霜。举头望明月，低头思故乡。 床前明月光，疑是地上霜。举头望明月，低头思故乡。床前明月光，疑是地上霜。举头望明月，低头思故乡。

        </div>

        <div id="scroll_box">

            <div id="scroll"></div>

        </div>

    </div>

 

CSS样式：

    <style>

        .box {

            width: 300px;

            height: 500px;

            position: relative;

            overflow: hidden;

            top: 100px;

            left: 100px;

            border: 2px solid #abcdef;

        }

        #content {

            padding: 5px, 18px, 5px, 5px;

            position: absolute;

            top: 0;

            left: 0;

        }

        #scroll_box {

            position: absolute;

            right: 0;

            background-color: #eee;

            height: 100%;

            width: 18px;

        }

        #scroll {

            position: absolute;

            /* height: 20px; */

            width: 18px;

            background: #abcdef;

            border-radius: 18px;

        }

    </style>

JS实现的逻辑：

 <script>

        //整个滑条盒子

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

        //装文字内容的盒子

        var content = document.getElementById("content");

        //装滑条的盒子

        var scroll_box = document.getElementById("scroll_box");

        //滑条块

        var scroll = document.getElementById("scroll");

        //获取滑条块高度

        //整个滑条盒子高/文字内容高 = 滑条块高/装滑条的盒子的高度

        //滑条块高=整个滑条盒子高*装滑条的盒子的高度/文字内容高

        var scrollHeight = box.offsetHeight * scroll_box.offsetHeight / content.scrollHeight;

        scroll.style.height = scrollHeight + "px";

 

        //给滑动添加鼠标移动事件

        scroll.onmousedown = function (e) {

            //scroll.offsetTop获取scroll元素上偏移量。当前scroll元素用了定位(不管绝对还是相对)，上偏移的参照物为其父元素(scroll_box)元素，即自己距离父元素的上偏移量

            var y1 = scroll.offsetTop;

            //mouseYOld此时鼠标点击的上偏移量，以屏幕为参照物，鼠标光标在屏幕里距离上边框的距离

            var mouseYOld = e.clientY;

            scroll.onmousemove = function (e) {

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

                //e.clientY此时鼠标停止移动的上偏移量，以屏幕为参照物，鼠标光标在屏幕里距离上边框的距离

                var y2 = e.clientY - mouseYOld;

                y = y1 + y2;

                //给y设置最小值

                y = y < 0 ? 0 : y;

                //给y设置最大值

                y = y > scroll_box.offsetHeight - scroll.offsetHeight ? scroll_box.offsetHeight - scroll.offsetHeight : y;

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

                //求内容滑动的上偏移量

                // 内容上偏移量/内容最大上偏移量=滑条上偏移量/滑条最大上偏移量

                //内容上偏移量/(scroll.scrollHeight - box.offsetHeight) = y/(scroll_box.offsetHeight - scrollHeight)

                var contentTop = (scroll.scrollHeight - box.offsetHeight) * y / (scroll_box.offsetHeight - scrollHeight);

                content.style.top = contentTop + "px";

            }

        }

        document.onmouseup = function () {

            scroll.onmousemove = null

        }

    </script>

 

得到y的逻辑图：

 

  滑条最大上偏移量和内容最大上偏移量的逻辑图：