原生js实现懒加载中判断元素出现在可视区域的一种方式，封装函数：获取当前元素距离html文档顶部距离

本文链接：https://blog.youkuaiyun.com/H_xiang_xiang/article/details/119808313

本文介绍了使用原生JavaScript实现懒加载的方法，重点讨论如何判断元素是否进入可视区域。通过获取元素相对于页面顶部的距离，结合页面滚动位置和可视区域高度，判断元素是否可见。同时，由于offsetParent可能受定位祖先元素影响，文章提供了一个封装函数来准确获取元素距离文档顶部的距离。

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

懒加载

延迟加载，等内容进入可视区域了再去加载资源

如何判断元素出现在可视区域？

1）获取被监视的元素到页面顶部的距离 element.offsetTop （前提：没有定位的祖先）
2）获取页面垂直滚动的距离 window.pageYOffset
3）获取可视区域高度 window.innerHeight
4）当 element.offsetTop - window.pageYOffset < window.innerHeight 即为元素出现在可视区域
在这里插入图片描述

获取元素到页面顶部的距离 `element.offsetTop` ?

MDN定义：

element.offsetParent：只读属性，返回一个最近的包含这个 element 的定位元素或 table,td,th,body 元素
element.offsetTop：只读属性，返回 element 相对于其 offsetParent 元素的顶部内边距的距离。

理解：

如果祖先盒子有定位，子盒子的 offsetParent 就是祖先盒子，offsetTop 如红色线所示
如果祖先盒子没定位，子盒子的 offsetParent 就是body，offsetTop 如紫色线所示

在这里插入图片描述

所以如果不能保证 被监视的元素 没有定位祖先，就不能用 element.offsetTop 来获取当前元素距离文档页面顶端的距离，于是封装了下面这个函数

function getTop(ele) {
    let top = 0;
    // body的offsetParent为null
    while (ele.offsetParent) {
    	// ele.offsetParent.clientTop是指定位父级的上边框
        top = top + ele.offsetTop + ele.offsetParent.clientTop;
        ele = ele.offsetParent;
    }
    return top;
}