JS基础--关于滚动条scroll

最新推荐文章于 2024-06-23 18:20:41 发布

Yannnnnm

最新推荐文章于 2024-06-23 18:20:41 发布

阅读量2k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Yannnnnm/article/details/108678086

版权

这里主要介绍滚动条的位置，查询文档当前水平和垂直的滚动的像素数，以及怎么改变他们的值

查看滚动条的位置

我们可以发现在很多网页的导航以及侧边导航都根据了滚动条的长度来进行了一些设置，那么我们如何获取他呢？

window.scrollX;window.scrollY（即Window.pageXOffset，Window.pageYOffset）
分别返回文档当前水平和垂直的滚动的像素数，但是需要注意的是这种方式在ie9以下并不兼容
在ie9以下，我们可以采用document.(documentElement/body).scrollLeft /scrollTop获取，但这种方法虽然由IE引入，但已被目前各主流浏览器所支持，但是需要注意的是，在标准模式下，二者只有一个有值那么为了使用的方便性以及我们日常的实用性，我们可以采取如下方式避免取到0导致页面运行异常的问题，

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

当然在确定我们使用的浏览器版本的情况下，如果能使用第一种，当然是以一种更为简单明了，所有我们也可以这样封装方便后续直接使用

    /**
     * 获取滚动条的距离
     * @returns {Object}  返回文档当前水平和垂直的滚动的像素数的对象
     */
    getScrollPx() {
        if (window.scrollX) {
            return {
                x: window.scrollX,
                y: window.scrollX
            }
        } else {
            return {
                // 因为这两个只有一个有值，所以加起来和上面的或用法一样
                x: document.body.scrollLeft + document.documentElement.scrollLeft,
                y: document.body.scrollTop + document.documentElement.scrollTop
            }
        }
    },

滚动条的相关方法

scroll(x,y),scrollTo(x,y) 把内容滚动到指定的坐标，绝对移动。 当前页面有滚动条
语法：window.scrollTo(x,y)
scrollBy(x,y) 滚动条累加，在原来的基础之上，相对移动。当前页面有滚动条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            width: 4000px;
            height: 4000px;
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div></div>

</body>

</html>

初始状态

改变scrollTo(x,y) 的值

这里我们可以发现,scrollTo(x,y) 是一个绝对单位，我们可以直接设置他的x,y来控制位置，那么如果越界了怎么办呢？

我们会发现他始终有一个最大值，为我们设置的宽高减去视口，那么回到初始值观察一下 scrollBy(x,y) ！
在这里插入图片描述
我们可以发现他每一次都是累加，但是同样也都不能越界，我们将上面的设置的body和html的样式删除那么还有没有用呢？看下面：