孙肖宁

模拟滚动条
描述:由于浏览器的渲染内核不一样,当页面过长或者过宽的时候,出现的滚动条的样式不一致,所以我们可以自己写滚动条。当...
扫描右侧二维码阅读全文
19
2018/04

模拟滚动条

描述:由于浏览器的渲染内核不一样,当页面过长或者过宽的时候,出现的滚动条的样式不一致,所以我们可以自己写滚动条。当文字过多的时候,就会出现滚动条,滚动条的宽度和内容的多少成反比。用户可以通过拖拉滚动条的方式查看全部内容。
实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟滚动条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 500px;
            border: 1px solid #84fcff;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }
        .scroll {
            width: 20px;
            height: 530px;
            background-color: #ccc;
            position: absolute;
            top: 0;
            right: 0;
        }
        .bar {
            width: 20px;
            background-color: #84fcff;
            border-radius: 10px;
            cursor: pointer;
            position: absolute;
            top: 0;
        }
        .content {
            padding: 15px;
            text-align: center;
            font: 700 180px/200px "宋体";
        }
    </style>
    <script>
        window.onload = function () {
            //获取相关元素
            var box = document.getElementById("box");//包裹内容最外层的盒子
            var content = box.children[0];//内容区域
            var scroll = box.children[1];//滚动条区域
            var bar = scroll.children[0];//滚动条

            //比例:内容的高/盒子的高 = scroll的高/bar的高 => bar的高 = 盒子的高*scroll的高/内容的高
            var barHeight = box.offsetHeight*scroll.offsetHeight/content.offsetHeight;//获取滚动条的高度
            bar.style.height = barHeight+"px";//赋值

            bar.onmousedown = function (event) {
                event = event || window.event;

                //获取位置
                var pageyy = event.pageY || scroll().top + event.clientY;//获取鼠标的位置
                var y = pageyy - bar.offsetTop;//获取鼠标在盒子中的位置
                //鼠标移动事件
                document.onmousemove = function (event) {
                    event = event || window.event;

                    //鼠标移动后的位置
                    var pagey = event.pageY || scroll().top + event.clientY;

                    //移动后鼠标在盒子中的位置
                    pagey = pagey - y;

                    //防止越界
                    if(pagey<0){
                        pagey = 0;
                    }
                    if(pagey>scroll.offsetHeight - bar.offsetHeight){
                        pagey = scroll.offsetHeight - bar.offsetHeight;
                    }
                    //bar的移动
                    bar.style.top = pagey+"px";

                    //求出内容的移动距离:内容走的距离/bar走的距离 = (内容的高-大盒子的高)/(scroll的高-bar的高)
                    var s = pagey*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);

                    //内容移动
                    content.style.marginTop = -s+"px";
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }
            }
            //鼠标松开解绑事件
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }
    </script>
</head>
<body>
    <div class="box" id="box">
        <div class="content">
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            1<br>
            2<br>
            2<br>
            2<br>
            2<br>
            2<br>
            2<br>
            结束
        </div>
        <div class="scroll">
            <div class="bar"></div>
        </div>
    </div>
</body>
</html>
Last modification:April 19th, 2018 at 08:59 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment