【前端知识之JS】如何判断一个元素是否在可视区域中

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍如何判断一个元素是否在可是区域中。

---

一、用途

在日常开发中，我们经常需要判断目标元素是否在可视窗口内，从而实现一些常用的功能，如：

• 图片的懒加载；
• 列表的无限滚动；
• 计算广告元素的曝光情况；
• 可点击链接的预加载。

二、实现方法

1、offsetTop、scrollTop

属性	含义
offsetTop	元素的上外边框至包含元素的上内边框之间的像素距离，其他方向相同
offsetWidth	元素两端算上外边框的宽度，其他方向相同
scrollLeft 和 scrollTop	既可以确定当前元素的滚动状态，也可以设置元素的滚动位置
scrollWidth 和 scrollHeight	确定元素内容的实际大小
clientWidth	元素内容区宽度加上左右内边距宽度，即clientWidth = content + padding
clientHeight	元素内容区高度加上上下内边距高度，即clientHeight = content + padding

公式如下：

0 <= el.offsetTop - document.documentElement.scrollTop <= viewPortHeight

代码实现：

function isInViePortOfOne(el){
   
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight||document.body.clientHeight
    const offsetTop = el.offsetTop;
    const scollTop = document.documentElement.scrollTop
    const top = offsetTop - scollTop;
    return top <= viewPortHeight && top >= 0
}

2、getBoundingClientRect

如果一个元素在视窗内，那么它一定满足下面四个条件：

• top <= 0;
• left <= 0;
• bottom <= 视窗高度;
• right <= 视窗高度。

function isInViePo