PC端-自定义滚动条

html代码：

<div id="wrap">
        <div id="content"></div>
        <div id="scrollBar">
            <div id="scrollIn"></div>
        </div>
</div>

css代码：

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body,
        html {
            height: 100%;
            overflow: hidden;
        }
        
        #wrap {
            position: relative;
            width: 100%;
            height: 100%;
            background: lavender;
            overflow: hidden;
        }
        
        #scrollBar {
            position: absolute;
            right: 0;
            top: 0;
            width: 30px;
            height: 100%;
            background: pink;
            border-left: 1px solid hotpink;
            border-right: 1px solid hotpink;
            box-sizing: border-box;
        }
        
        #scrollIn {
            position: absolute;
            left: 1px;
            top: 0;
            width: 26px;
            /* height: 100px; */
            background: hotpink;
        }
        
        #content {
            position: absolute;
            left: 50%;
            top: 0;
            text-align: center;
        }
    </style>

javascript代码：

<script>
        window.onload = function() {
            var scrollBar = document.querySelector('#scrollBar');
            var scrollIn = document.querySelector('#scrollIn');
            var content = document.querySelector('#content');

            // 添加内容
            for (var i = 0; i < 300; i++) {
                content.innerHTML = content.innerHTML + i + '<br/>';
            }

            // ----------------动态获取滚动条的高度
            // 滚动条的高度/屏幕的高度=屏幕的高度/内容的高度=滚动条的滚动距离/内容的滚动距离

            //滑块的高度 = 滑槽的高度 / 内容的高度 *滑槽的高度
            var scale = document.documentElement.clientHeight / content.offsetHeight;
            scrollIn.style.height = scale * document.documentElement.clientHeight + 'px';

            // 鼠标按下
            scrollIn.onmousedown = function(event) {
                event = event || window.event;
                // 元素起始位置
                var elementStartY = scrollIn.offsetTop;
                // 鼠标点击位置
                var mouseStartY = event.clientY;

                // 全局捕获(低级浏览器)
                scrollIn.setCapture && scrollIn.setCapture();

                // 鼠标移动
                document.onmousemove = function(event) {
                    event = event || window.event;
                    // 鼠标结束位置
                    var mouseLastY = event.clientY;
                    // 鼠标距离差
                    var distanceY = mouseLastY - mouseStartY;
                    // 元素最终位置
                    var elementLastY = elementStartY + distanceY;

                    // 临界值判断
                    if (elementLastY < 0) {
                        elementLastY = 0;
                    } else if (elementLastY > document.documentElement.clientHeight - scrollIn.offsetHeight) {
                        elementLastY = document.documentElement.clientHeight - scrollIn.offsetHeight;
                    }

                    // 设置css样式
                    scrollIn.style.top = elementLastY + 'px';

                    // ------------------------------内容滚动逻辑
                    //内容的滚动距离 =  滑块滚动距离 / scale
                    var contentDistance = -elementLastY / scale;
                    // console.log(contentDistance);
                    // 临界值判断s
                    if (contentDistance > 0) {
                        contentDistance = 0;
                    } else if (contentDistance >= Math.abs(distanceY)) {
                        contentDistance = content.offsetHeight - scrollBar.offsetHeight;
                    }
                    content.style.top = contentDistance + 'px';
                }

                // 鼠标松开
                document.onmouseup = function() {
                        // 释放全局捕获(低级浏览器)
                        scrollIn.releaseCapture && scrollIn.releaseCapture();
                        // 释放onmousemove事件
                        document.onmousemove = document.onmouseup = null;
                    }
                    // 禁止浏览器默认行为（高级浏览器）
                return false;

            }

            // 滚轮事件
            // ie / chrome: mousewheel(dom2的标准模式)
            // event.wheelDelta
            // 上： 120
            // 下： - 120
            // firefox: DOMMouseScroll(dom2的标准模式)
            // event.detail
            // 上： - 3
            // 下： 3
            // 绑定事件监听
            document.addEventListener('mousewheel', scrollMove);
            document.addEventListener('DOMMouseScroll', scrollMove);
            var flag = true;
            // 先判断是ie和chrome还是火狐浏览器
            function scrollMove(event) {
                event = event || window.event;
                // ie/chrome
                if (event.wheelDelta) {
                    // 区分滚动方向
                    if (event.wheelDelta > 0) {
                        flag = true;
                    } else {
                        flag = false;
                    }
                    // firefox
                } else if (event.detail) {
                    // 区分滚动方向
                    if (event.detail < 0) {
                        flag = true;
                    } else {
                        flag = false;
                    }
                }

                // 设置向上向下滚动的距离
                if (flag === true) {
                    var temp = scrollIn.offsetTop - 10;
                    if (temp < 0) {
                        temp = 0;
                    }
                    // 滚动条
                    scrollIn.style.top = temp + 'px';
                    // 内容
                    var contentDistance = -temp / scale;
                    content.style.top = contentDistance + 'px';
                } else {
                    var temp = scrollIn.offsetTop + 10;
                    if (temp > document.documentElement.clientHeight - scrollIn.offsetHeight) {
                        temp = document.documentElement.clientHeight - scrollIn.offsetHeight;
                    }
                    // 滚动条
                    scrollIn.style.top = temp + 'px';
                    // 内容
                    var contentDistance = -temp / scale;
                    content.style.top = contentDistance + 'px';
                }
            }
        }
</script>