原生js实现简单的滚动条

原生js实现简单滚动条

<div class="scroll">
        <div class="con">
            滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容
            滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容
            滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容
            滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容
            滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容
            滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容
            滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容
            滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容
            滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容
            滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容
            滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容
            滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容滚动条内容
        </div>
        <div class="slip">
            <div class="bar"></div>
        </div>
    </div>

.scroll {
            width: 300px;
            height: 400px;
            padding-right: 10px;
            border: 1px solid #333;
            overflow: hidden;
            position: relative;
        }

        .con {
            width: 280px;
            padding: 10px;
            position: absolute;
        }

        .slip {
            width: 20px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background-color: #999;
        }

        .bar {
            width: 14px;
            height: 30px;
            position: absolute;
            left: 50%;
            margin-left: -7px;
            border-radius: 10px;
            background-color: #000;
        }

 var scroll = document.querySelector(".scroll");
        var con = scroll.querySelector(".con");
        var slip = scroll.querySelector(".slip");
        var bar = scroll.querySelector(".bar");
        bar.onmousedown = function (ev) {
            var ev = window.event || event;
            var sTop = ev.clientY - bar.offsetTop; //获取鼠标点击滑块bar时到滑块顶部的距离
            document.onmousemove = function (e) {
                var e = window.event || event;
                var bTop = e.clientY - sTop; //设置滑块的top值
                if (bTop < 0) {
                    bTop = 0;
                }
                if (bTop > slip.clientHeight - bar.clientHeight) {
                    bTop = slip.clientHeight - bar.clientHeight;
                }
                var scale = bTop / (scroll.clientHeight - bar.clientHeight); //滑块相对滚动条运动的比例
                var cTop = (scroll.clientHeight - con.clientHeight) * scale;//用同样比例计算内容的top值
                bar.style.top = bTop + "px";
                con.style.top = cTop + "px";
            }
            document.onmouseup = function () {
                document.onmousemove=document.onmouseup = "";
            }
            return false;
        }
        scroll.onmousewheel = function (ev) { //给最外侧盒子设置滚轮事件
            var n = 10;//设置每次滑动鼠标滑轮运动的px值
            var ev = window.event || event;
            if (ev.wheelDelta < 0) {
                var bTop = bar.offsetTop + n;
            }
            if (ev.wheelDelta > 0) {
                var bTop = bar.offsetTop - n;
            }
            if (bTop < 0) {
                bTop = 0
            }
            if (bTop > slip.clientHeight - bar.clientHeight) {
                bTop = slip.clientHeight - bar.clientHeight
            }
            var scale = bTop / (scroll.clientHeight - bar.clientHeight);
            var cTop = (scroll.clientHeight - con.clientHeight) * scale;
            bar.style.top = bTop + "px";
            con.style.top = cTop + "px";
        }