下方通用示例html的dom和公共js代码：

<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>
    </head>
    <style>
        #page {
            height: 2000px;
            position: relative;
        }
        #content {
            width: 500px;
            height: 300px;
            background-color: darksalmon;
            position: absolute;
            top: 800px;
            left: 50%;
            transform: translateX(-50%);
        }
        #hit-container {
            position: fixed;
            bottom: 0;
        }
    </style>
    <body>
        <div id="page">
            <div id="content">content</div>
            <div id="hit-container"><span id="hit"></span></div>
        </div>
        <!--公共js-->
        <script>
            const hitDom = document.getElementById('hit');
            const content = document.getElementById('content');
            // 展示实时位置信息
            const showHit = (logInfo, isVisible1, isVisible2) => {
                let html = `<p>是否在可视区域：${
                    isVisible1 && isVisible2
                }（${isVisible1}，${isVisible2}）</p>`;
                Object.keys(logInfo).map(
                    (key) => (html += `<p>${key}:${logInfo[key]}</p>`)
                );
                hitDom.innerHTML = html;
            };
        </script>
        <!--方法js-->
        <script></script>
     </body>
</html>

一、用offset等偏移量属性来判断

需要判断一个元素在可视范围内，也就是在2个边界内：

0.涉及属性含义

document.documentElement.clientHeight：可见区域高度。
document.documentElement.scrollTop：滚动条滚动的距离。
content.offsetHeight：元素的高度。
content.offsetTop：元素顶部距离父容器顶部的高度。

1.元素进入可视区域

如下图可得，content可见的条件是：
content.offsetTop + content.offsetHeight > scrollTop
在这里插入图片描述
在这里插入图片描述

2.元素即将离开可视区域

如下图可得，content可见的条件是：
content.offsetTop < scrollTop + clientHeight
在这里插入图片描述
在这里插入图片描述

3.示例代码

window.addEventListener('scroll', () => {
    const scrollTop = document.documentElement.scrollTop;
    const clientHeight = document.documentElement.clientHeight;
    let isVisible1 =
        content.offsetTop + content.offsetHeight > scrollTop;
    let isVisible2 = content.offsetTop < scrollTop + clientHeight;

    const logInfo = {
        'content.offsetTop': content.offsetTop,
        'content.offsetHeight': content.offsetHeight,
        scrollTop: scrollTop,
        clientHeight: clientHeight
    };
    showHit(logInfo, isVisible1, isVisible2);
});

4.总结

一个元素content满足以下条件时，可判断为在可视区域：

const isShow=()=>{
    return
    	(content.offsetTop + content.offsetHeight > scrollTop)
    	&& (content.offsetTop < scrollTop + clientHeight);
};

二、用getBoundingClientRect

0.函数返回值

height: 元素高度
width: 元素宽度

left: 元素左上角点距离可视区域左侧宽度。
right: 元素右上角点距离可视区域右侧宽度。

top: 元素上边距离可视区域高度。
bottom: 元素底边距离可视区域高度。

x: 同left
y: 同top

1.元素进入可视区域

如下图可得，元素可见的条件是：
bottom > 0
在这里插入图片描述
在这里插入图片描述

2.元素即将离开可视区域

如下图可得，元素可见的条件是：
top < clientHeight
在这里插入图片描述
在这里插入图片描述

3.示例代码

window.addEventListener('scroll', () => {
   const { top, bottom } = content.getBoundingClientRect();
   const clientHeight = document.documentElement.clientHeight;
   let isVisible1 = bottom > 0;
   let isVisible2 = top < clientHeight;

   const logInfo = {
       bottom: bottom,
       top: top,
       clientHeight: clientHeight
   };
   showHit(logInfo, isVisible1, isVisible2);
});

4.总结

一个元素满足以下条件时，可判断为在可视区域：

const isShow=()=>{
    const {top, bottom}=content.getBoundingClientRect();
    return
    	(bottom > 0)
    	&& (top < clientHeight);
};
# javascript
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟