WebAPI第四天学习总结—— 元素滚动 scroll 系列

最新推荐文章于 2025-02-04 15:36:03 发布

李穩钰

最新推荐文章于 2025-02-04 15:36:03 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

分类专栏： WebAPI

本文链接：https://blog.youkuaiyun.com/weixin_52819925/article/details/119777338

WebAPI 专栏收录该内容

23 篇文章

订阅专栏

本文总结了WebAPI中关于元素滚动scroll的知识，包括scroll概述、常用属性、页面被卷去的头部概念及兼容性解决方案。通过示例详细讲解了如何实现仿淘宝固定右侧侧边栏的效果，涉及到滚动事件、页面偏移量的获取，以及在不同浏览器中的兼容处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素滚动 scroll 系列

scroll 概述

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

scroll系列常用属性

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，包含padding，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，包含padding，返回数值不带单位

注意: 实际的宽度和高度是包含padding的.

属性分析图：

在这里插入图片描述

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
    </div>

    <script>
        // scroll 系列
        var div = document.querySelector('div');
        console.log(div.scrollHeight);
        console.log(div.clientHeight);
        // scroll滚动事件当我们滚动条发生变化会触发的事件
        div.addEventListener('scroll', function() {
            console.log(div.scrollTop);

        })
    </script>
</body>
</html>

页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。
当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。
滚动条在滚动时会触发 onscroll事件。
通过window.pageYOffset 获得 左侧：window.pageXOffset

案例：仿淘宝固定右侧侧边栏

效果：

在这里插入图片描述

案例需求：

原先侧边栏是绝对定位
当页面滚动到一定位置，侧边栏改为固定定位
页面继续滚动，会让返回顶部显示出来（粉红块，某些条件下回显示返回顶部文字）

案例分析:

需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是document
滚动到某个位置，就是判断页面被卷去的上部值。
页面被卷去的头部：可以通过window.pageYOffset 获得如果是被卷去的左侧window.pageXOffset
注意：元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部则是 window.pageYOffset
其实这个值可以通过盒子的 offsetTop可以得到，如果大于等于这个值，就可以让盒子固定定位了

案例代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }

        .w {
            width: 1200px;
            margin: 10px auto;
        }

        .header {
            height: 150px;
            background-color: purple;
        }

        .banner {
            height: 250px;
            background-color: skyblue;
        }

        .main {
            height: 1000px;
            background-color: yellowgreen;
        }

        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>

    <script>
        // 1.获取元素
        var sliderbar = document.querySelector('.slider-bar'); // 粉色div，右侧侧边栏
        var banner = document.querySelector('.banner'); //青色div

        // banner.offsetTop 就是被卷去头部的大小 一定要写在滚动的外面  // banner距离界面顶部的距离
        var bannerTop = banner.offsetTop;
        // 当我们侧边栏固定定位之后应该变化的数值 （侧边栏距离界面顶部的长度 - banner距离界面顶部的长度）
        var sliderbarTop = sliderbar.offsetTop - bannerTop;

        // 获取main 主体元素
        var main = document.querySelector('.main'); // 绿色主体部分
        var goBack = document.querySelector('.goBack'); // 返回顶部的span
        var mainTop = main.offsetTop;
        // 2. 页面滚动事件 scroll
        document.addEventListener('scroll', function () {
            // console.log(11);
            // window.pageYOffset 页面被卷去的头部
            // console.log(window.pageYOffset);
            // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
            if (window.pageYOffset >= bannerTop) {  // 如果滚动距离大于等于banner距离顶部的距离（其实就是banner滚动到了页面顶部）
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            // 4. 当我们页面滚动到main盒子，就显示 goback模块 （绿色盒子滚动到顶部，就显示返回顶部）
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
        })
    </script>
</body>

</html>

补充：

元素在界面上的位置(offsetTop,offsetLeft)，不会随着界面滚动而发生改变。他会因为通过style.left/top的改变而改变。

淘宝侧边栏分析：

在这里插入图片描述

页面滚动图片：

在这里插入图片描述

页面被卷去的头部兼容性解决方案

需要注意的是，获取页面被卷去的头部高度，有兼容性问题，因此通常有如下几种写法：

声明了 DTD，使用 document.documentElement.scrollTop
未声明 DTD，使用 document.body.scrollTop
新方法 window.pageYOffset和window.pageXOffset，IE9 开始支持

function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
//使用的时候  getScroll().left