JavaScript判断元素可视区域：offsetTop与getBoundingClientRect方法

前言

在常规前端开发场景下，开发者常需判定目标元素是否位于浏览器视窗范围内，或其与视窗边界的间距是否低于特定阈值（如100像素），以此支撑多项常用交互功能的实现，具体包括：

图片资源的懒加载机制
列表内容的无限滚动效果
广告组件曝光数据的统计
可交互链接的预加载策略

具体实现方案

检测元素可视状态的主流方法涉及offsetTop、scrollTop以及getBoundingClientRect

offsetTop与scrollTop详解

offsetTop表示元素上外边框至包含块上内边框间的像素距离，其余offset相关属性图示如下：

进一步解析clientWidth与clientHeight的概念：

clientWidth指元素内容区宽度叠加左右内边距后的总宽，即clientWidth = content + padding
clientHeight指元素内容区高度叠加上下内边距后的总高，即clientHeight = content + padding

观察可知client系列属性均不包含外边距部分

关于scroll系列属性的说明如下：

scrollWidth与scrollHeight用于界定元素内容的实际尺寸
scrollLeft与scrollTop既反映元素当前滚动状态，也可用于设定滚动位置
- 垂直方向滚动scrollTop > 0
- 水平方向滚动scrollLeft > 0
将元素scrollLeft与scrollTop赋值为0，即可重置滚动位置

注意事项

上述属性均为只读，每次读取均需重新计算

接下来探讨具体的判断逻辑实现：

核心计算公式如下：

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

代码实现示例：

function isInViewPortOfOne (el) {
    // viewPortHeight 兼容所有浏览器写法
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
    const offsetTop = el.offsetTop
    const scrollTop = document.documentElement.scrollTop
    const top = offsetTop - scrollTop
    return top &lt;= viewPortHeight
}

getBoundingClientRect方法

该方法返回一个DOMRect实例，包含left、top、right、bottom、x、y、width及height等属性

const target = document.querySelector('.target');
const clientRect = target.getBoundingClientRect();
console.log(clientRect);
// {
//   bottom: 556.21875,
//   height: 393.59375,
//   left: 333,
//   right: 1017,
//   top: 162.625,
//   width: 684
// }

属性对应关系图示如下：

页面滚动时，top与left属性值会动态更新

若元素完全处于视窗内部，则必须同时满足以下四个条件：

top值大于等于0
left值大于等于0
bottom值小于等于视窗高度
right值小于等于视窗宽度

对应实现代码如下：

function isInViewPort(element) {
  const viewWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewHeight = window.innerHeight || document.documentElement.clientHeight;
  const {
    top,
    right,
    bottom,
    left,
  } = element.getBoundingClientRect();
  return (
    top >= 0 &&
    left >= 0 &&
    right <= viewWidth &&
    bottom <= viewHeight
  );
}

以上为JS判断元素是否在可视区域技巧详解的完整内容，更多JS可视区域判断相关资讯请查阅本站其他文章！

JS判断元素是否在可视区域技巧详解

前言

具体实现方案

offsetTop与scrollTop详解

注意事项

getBoundingClientRect方法

实用工具推荐