JavaScript - WebAPI - 滚动家族 - scroll家族

Henry_ww

于 2021-08-14 13:54:25 发布

阅读量171

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Henry_ID/article/details/119700137

版权

JavaScript 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

1.0-offset家族(元素自身大小)

offsetWidth：宽度，border（左右） + padding（左右）+content：getComputedStyle(元素)[width\border\padding]

offsetHeight：高度（与宽度逻辑一样）

offsetLeft：自己的border外部到定位父级 border的内部

offsetTop：与offsetLeft逻辑一样

offsetParent：定位父级

1.1-scroll家族（元素内容大小）

1.offset家族：
- offsetWidth、offsetHeight:获取元素自身的真实宽高(width+padding+border),不带单位，是number类型
- offsetParent：获取一个元素的定位父级
- offsetLeft、offsetTop:获取元素的外边框到定位父级的内边框的（左/上）距离
2.scroll家族：（与offset家族类似，不带单位，number类型）
- scrollWidth和scrollHeight：元素内容真实的宽高
- scrollLeft和scrollTop：元素在滚动时超出内容区域的部分
- onscroll:元素的滚动条事件，只要滚动就会触发

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
    <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>滚动家族 - scroll家族</title>
        <style>
            .box {
                width: 200px;
                height: 200px;
                overflow: auto;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <img src="images/slidepic6.jpg" alt="" />
        </div>

        <script>
            // 滚动家族: 给元素做滚动事件  onscroll

            const box = document.querySelector(".box");

            // 给盒子做滚动事件
            box.onscroll = function () {
                // console.log(1)

                // 滚动内容的真实宽高: scrollWidth / Height
                // console.log(box.scrollWidth, box.scrollHeight)   // 没有价值

                // 滚动距离: 往左和往上滚出去多少: scrollLeft/Top
                // console.log(box.scrollLeft, box.scrollTop)

                // 可以修改滚动距离
                box.scrollLeft = 100; // 有效: 可以修改
            };

            // 总结
            // 元素可以滚动: 条件 1. 内容要比盒子大, 2. overflow: auto
            // 元素滚动: 实际开发中,不会存在( 页面滚动 )
        </script>
    </body>
</html>

1.2-获取网页滚动距离 - 页面滚动

1.获取页面的HTML元素和body元素
- HTML:document.documentElement;
- body: document.body;
2.获取整个页面的滚动事件：window.onscroll
- 没有兼容性
3.获取页面的scrollTop和scrollLeft:存在浏览器兼容性
- 谷歌/火狐： window.pageXOffset （左） window. pageYOffset（上）
- IE浏览器： document.documentElement.scrollLeft/Top
- 某些浏览器:document.body.scrollLeft/Top
4.封装一个获取页面滚出去距离的浏览器兼容性函数：利用逻辑或的短路

<!DOCTYPE html>
<html lang="zh-CN">
    <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>💥 滚动家族 - 页面滚动</title>
        <style>
            body {
                width: 2000px;
                height: 2000px;
            }
        </style>
    </head>

    <body>
        <script>
            // 页面滚动: 给window做滚动事件
            window.onscroll = function () {
                // console.log(1)

                // 滚动距离: 元素.scrollLeft/Top
                // window不是元素: 没有scrollLeft和Top属性
                // console.log(window.scrollLeft)              // undefined

                // 获取滚动距离有兼容性
                // 谷歌: window.pageXOffset || pageYOffset
                // console.log(pageXOffset, pageYOffset)       // IE8及以下不支持

                // IE: html.scrollLeft/scrollTop
                // console.log(document.documentElement.scrollLeft)

                // 其他浏览器: body.scrollLeft/scrollTop
                // console.log(document.body.scrollLeft)

                // pageXOffset: 只能拿不能改
                // pageXOffset = 500                // 修改无效

                // 只有元素可以修改: 可以修改html或者body(主要是html)
                document.documentElement.scrollLeft = 500;

                // 假设需要通过js修改页面的滚动效果: 修改html.scrollLeft或者Top(修改Top居多)
            };
        </script>
    </body>
</html>