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

    1.元素可视区 client 系列

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

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

    2.元素滚动 scroll 系列

    2.1 元素 scroll 系列属性

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

     2.2 页面被卷去的头部

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

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

    需求：

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

    1. <!-- css样式 -->
    2. <style>
    3.     * {
    4.         margin: 0;
    5.         padding: 0;
    6.     }
    7.     .w {
    8.         width: 1200px;
    9.         margin: 10px auto;
    10.     }
    11.     .header {
    12.         height: 220px;
    13.         background-color: pink;
    14.     }
    15.     .banner {
    16.         height: 330px;
    17.         background-color: skyblue;
    18.     }
    19.     .main {
    20.         height: 1000px;
    21.         background-color: purple;
    22.     }
    23.     .slide-bar {
    24.         position: absolute;
    25.         right: 30px;
    26.         top: 480px;
    27.         width: 80px;
    28.         height: 200px;
    29.         font-size: 18px;
    30.         background-color: coral;
    31.     }
    32.     .goBack {
    33.         display: none;
    34.         position: absolute;
    35.         bottom: 10px;
    36.     }
    37. </style>
    38. <body>
    39.     <!-- html结构 -->
    40.     <div class="slide-bar">
    41.         <span class="goBack">返回顶部</span>
    42.     </div>
    43.     <div class="header w">头部区域</div>
    44.     <div class="banner w">banner区域</div>
    45.     <div class="main w">主体部分</div>
    46.     <!-- js代码 -->
    47.     <script>
    48.         // 1. 获取元素
    49.         let slideBar = document.querySelector(".slide-bar");
    50.         let goBack = document.querySelector('.goBack');
    51.         let header = document.querySelector('.header');
    52.         let banner = document.querySelector('.banner');
    53.         let main = document.querySelector('.main');
    54.         // 由于offsetTop是动态生成的，所以一定要写在滚动事件外面
    55.         let bannerTop = banner.offsetTop; 
    56.         let slideBarTop = slideBar.offsetTop - bannerTop; // 变成固定定位时的top的值
    57.         let mainTop = main.offsetTop;
    58.         // 2. 绑定滚动事件 onscroll
    59.         document.onscroll = function() {
    60. // (1) 当滚动条滚动到banner区域时，侧边栏变成固定定位，即页面被卷去的头部等于原始banner区域的offsetTop值
    61.             if (window.pageYOffset >= bannerTop) {
    62.                 slideBar.style.position = 'fixed';
    63.                 slideBar.style.top = slideBarTop + 'px';
    64.             } else {
    65.                 // 否则就变回绝对定位
    66.                 slideBar.style.position = 'absolute';
    67.                 slideBar.style.top = '480px';
    68.             };
    69. // (2) 当滚动条滚动到main区域时，侧边栏中的返回顶部出现，即页面被卷去的头部等于原始main区域的offsetTop值
    70.             if (window.pageYOffset >= mainTop) {
    71.                 goBack.style.display = 'block';
    72.             } else {
    73.                 // 否则就隐藏该模块
    74.                 goBack.style.display = 'none';
    75.             }
    76.         }
    77.     </script>
    78. </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 获得

     

  • 相关阅读:
    SpringCloud常用组件
    喜相逢再递表港交所：非控股股东均亏损，已提前“套现”数千万元
    递归：x的n次幂
    护眼灯AAA级和国AA级的区别？推荐几款优质国AA护眼台灯
    python抓取网页视频
    0 至 10 之间，10以内的儿童数学题 生成工具 代码段 JavaScript
    云原生 - K8s命令合集
    [零基础学IoT Pwn] 复现Netgear WNAP320 RCE
    depthimage-to-laserscan
    minio文件迁移
  • 原文地址：https://blog.csdn.net/JJ_Smilewang/article/details/125394461