元素可视区client系列和元素滚动 scroll 系列

最新推荐文章于 2024-05-11 13:34:12 发布

JJ_Smilewang

最新推荐文章于 2024-05-11 13:34:12 发布

阅读量251

点赞数 1

分类专栏： DOM 文章标签： javascript 前端

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/125394461

版权

DOM 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.元素可视区 client 系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

注意：client 宽度/高度和 offset 宽度/高度最大的区别是它不包括边框。

2.元素滚动 scroll 系列

2.1 元素 scroll 系列属性

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

2.2 页面被卷去的头部

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

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

需求：

1.原先侧边栏是绝对定位
2. 当页面滚动到一定位置，侧边栏改为固定定位
3. 页面继续滚动，会让返回顶部显示出来

<!-- css样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .w {
        width: 1200px;
        margin: 10px auto;
    }
    .header {
        height: 220px;
        background-color: pink;
    }
    .banner {
        height: 330px;
        background-color: skyblue;
    }
    .main {
        height: 1000px;
        background-color: purple;
    }
    .slide-bar {
        position: absolute;
        right: 30px;
        top: 480px;
        width: 80px;
        height: 200px;
        font-size: 18px;
        background-color: coral;
    }
    .goBack {
        display: none;
        position: absolute;
        bottom: 10px;
    }
</style>
<body>
    <!-- html结构 -->
    <div class="slide-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
    <!-- js代码 -->
    <script>
        // 1. 获取元素
        let slideBar = document.querySelector(".slide-bar");
        let goBack = document.querySelector('.goBack');
        let header = document.querySelector('.header');
        let banner = document.querySelector('.banner');
        let main = document.querySelector('.main');
        // 由于offsetTop是动态生成的，所以一定要写在滚动事件外面
        let bannerTop = banner.offsetTop; 
        let slideBarTop = slideBar.offsetTop - bannerTop; // 变成固定定位时的top的值
        let mainTop = main.offsetTop;
        // 2. 绑定滚动事件 onscroll
        document.onscroll = function() {
// (1) 当滚动条滚动到banner区域时，侧边栏变成固定定位，即页面被卷去的头部等于原始banner区域的offsetTop值
            if (window.pageYOffset >= bannerTop) {
                slideBar.style.position = 'fixed';
                slideBar.style.top = slideBarTop + 'px';
            } else {
                // 否则就变回绝对定位
                slideBar.style.position = 'absolute';
                slideBar.style.top = '480px';
            };
// (2) 当滚动条滚动到main区域时，侧边栏中的返回顶部出现，即页面被卷去的头部等于原始main区域的offsetTop值
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                // 否则就隐藏该模块
                goBack.style.display = 'none';
            }
        }
    </script>
</body>

案例分析：

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

3.三大系列总结

它们的主要用法：
1. offset系列经常用于获得元素位置 offsetLeft、 offsetTop
2. client 经常用于获取元素大小 clientWidth、 clientHeight
3. scroll 经常用于获取滚动距离 scrollTop 、scrollLeft
4. 注意页面滚动的距离通过 window.pageXOffset 获得

JJ_Smilewang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素可视区client系列和元素滚动 scroll 系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。注意：client 宽度/高度和 offset 宽度/高度最大的区别是它不包括边框。scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头
复制链接

扫一扫