模拟滚动条的实现

最新推荐文章于 2024-09-04 14:32:45 发布

Liveuol

最新推荐文章于 2024-09-04 14:32:45 发布

阅读量531

点赞数 2

分类专栏： javascript 文章标签： html javascript css

本文链接：https://blog.csdn.net/m0_50855143/article/details/120326519

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了滚动条实现的原理和步骤，包括理解clientX、clientY等坐标属性，设置样式，计算滚动条高度，以及实现拖拽滚动条功能。通过示例代码展示了如何使用JavaScript进行动态交互，确保内容与滚动条联动。

摘要由CSDN通过智能技术生成

冲冲冲

在实现滚动条之前，我们得先理清楚几个概念问题：

属性名称	说明
clientX	点击位置距离当前body可视区域的x坐标
clientY	点击位置距离当前body可视区域的y坐标
screenX	点击位置距离当前电脑屏幕的x坐标
screenY	点击位置距离当前电脑屏幕的y坐标
pageX	对于整个页面来说，包括了被卷去的body部分的宽度
pageY	对于整个页面来说，包括了被卷去的body部分的高度
offsetX	相对于带有定位的父盒子的x坐标
offsetY	相对于带有定位的父盒子的y坐标
scrollHeight	文档内容实际高度，包括超出视窗的溢出部分

以上知识都是在DOM里面可以看到的事件对象属性

好了，以上概念了解清楚了，我们就进入到正题了

实现滚动条的第一个步骤：先写样式

<style>
        *{
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        .box {
            width: 300px;
            height: 500px;
            border: 1px solid red;
            margin: 100px;
            position: relative;
            overflow: hidden;
            user-select: none;
        }
        .content {
            padding: 5px 18px 5px 5px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .scroll {
            width: 18px;
            height: 500px;
            position: absolute;
            right:  0px;
            top: 0px;
            background-color: #eee;
        }
        .bar {
            height: 100px;
            width: 18px;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: red;
            border-radius: 10px;
            cursor: pointer;
        }

<div class="box" id="box">
        <div class="content" id="content">
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
            我是文字内容我是文字内容我是文字内容我是文字内容
        </div>
        <div class="scroll" id="scroll">
            <div class="bar" id="bar"></div>
        </div>
    </div>

第二个步骤就是写js里内容了

我们先要得到页面元素

 var box = document.getElementById("box")
 var content = document.getElementById("content");
 var scroll  = document.getElementById("scroll");
 var bar = document.getElementById("bar");
 var body = document.body;

再看看是否需要滚动条，当页面内容不够时，根本不需要滚动条，所以我们想要去判断

在这里还有个比例关系：

盒子的高度/内容的高度（全部内容的高度）=滑轮bar的高度/滚动条scroll的高度

var barheight = 0;
if(content.scrollHeight>box.clientHeight){
    barheight = box.clientHeight/content.scrollHeight*scroll.clientHeight;
}
console.log("barheight",barheight);
bar.style.height = barheight +"px";

既然bar的高度出来了，那我们就需要它去滑动，所以接下来要写的就是它滑动的实现，bar的滑动是有范围要求的，不能超出范围

var scrollheight = scroll.clientHeight;
        var target = scrollheight - barheight;//bar目标要走的距离
        var contenttar = content.scrollHeight - box.clientHeight//内容要走的距离
        bar.onmousedown = function(e){
            var bartop = bar.offsetTop;//bar到盒子的距离
            //盒子的offsettop
            var boxtop = box.offsetTop;
            var pageh = e.pageY;//鼠标到页面的距离
            var cha = pageh - bartop - boxtop;//鼠标在bar上的距离
            window.onmousemove =function(e){
                pageh = e.pageY;
                var current = pageh - cha - boxtop;//得到的是bar移动的距离
                bar.style.top = current +"px";
                if(current<=0){
                    bar.style.top = "0px";
                }
                console.log("target",target);
                if(current>=target){
                    bar.style.top = target +"px";
                }
            }
        }

好了，这个时候bar可以移动了，但是鼠标松开时，移动的事件还没有清除，所以清除吧

window.onmouseup =function(){
            window.onmousemove="";
        }

再然后，内容就要跟bar联动了，这个代码就好写了，再次之前我们还是的知道一个比例关系：

bar要走的距离/scroll的高度 = content走的距离/内容的比例

其实这个比例怎么写都可以，只要是包含bar要走的距离和内容要走的距离就OK了

以下是部分完整代码：

<script>
        //1.scroll系列 scroll 滚动
        //bar的高度/scroll的高度 = box的高度/content的高度
        var box = document.getElementById("box")
        var content = document.getElementById("content");
        var scroll  = document.getElementById("scroll");
        var bar = document.getElementById("bar");
        var body = document.body;
        //当内容的高度大于盒子的高度，计算滚动条bar的高度，否则为零
        var barheight = 0;
        if(content.scrollHeight>box.clientHeight){
            barheight = box.clientHeight/content.scrollHeight*scroll.clientHeight;
        }
        console.log("barheight",barheight);
        bar.style.height = barheight +"px";
        // 2.让滚动条能够拖拽 (onmousedown onmouseup)
        var scrollheight = scroll.clientHeight;
        var target = scrollheight - barheight;//bar目标要走的距离
        var contenttar = content.scrollHeight - box.clientHeight//内容要走的距离
        console.log("contenttar",contenttar);
        //bar要走的距离/scroll的高度 = content走的距离/内容的比例
        bar.onmousedown = function(e){
            var bartop = bar.offsetTop;//bar到盒子的距离
            //盒子的offsettop
            var boxtop = box.offsetTop;
            var pageh = e.pageY;//鼠标到页面的距离
            var cha = pageh - bartop - boxtop;
            window.onmousemove =function(e){
                pageh = e.pageY;
                var current = pageh - cha - boxtop;
                var contenttop = current/scroll.clientHeight*content.scrollHeight;
                content.style.top = -contenttop+"px";
                console.log("current",current);
                bar.style.top = current +"px";
                // window.onmousemove="";
                if(current<=0){
                    bar.style.top = "0px";
                    content.style.top = "0px"
                    console.log("bar.style.top",bar.style.top);
                }
                console.log("target",target);
                if(current>=target){
                    bar.style.top = target +"px";
                    content.style.top = -contenttar+"px"
                }
                // console.log("current",current);       
            } 
        }
        // 3.当拖拽滚动条的时候，改变内容的位置
        window.onmouseup =function(){
            window.onmousemove="";
        }
    </script>

欢迎大家留言评论哦，冲冲冲！！！