IntersectionObserver如何准确判断元素是否始终位于可视区域？
- 内容介绍
- 文章标签
- 相关推荐
本文共计817个文字，预计阅读时间需要4分钟。
目录+前言+概念+使用+注意事项+前言+在日常开发过程中，有时会遇到需要判断某些节点是否进入可视化区域的需求。例如：判断信息是否在可视区域显示再进行展示，图片是否加载等。通常
目录
- 前言
- 概念
- 使用
- 注意
前言
在日常的开发过程中，有时候会有一些要求判断节点是否进入可视化区域的需求。例如：判断信息是否在可视区域曝光再进行曝光，图片懒加载等。通常我们可以通过scroll和getBoundingclient来进行判断。
el.offsetTop - document.documentElement.scrollTop <= 视口高度 // 或 el.getBoundingClientRect().top <= 视口高度
但是scroll，getBoundingclient会引起回流，计算过于频繁可能会引起很大的性能问题，例如用户在使用的过程中，滑动卡顿啊等。那么有没有更好的办法来代替判断是否进入可视化区域呢？使用IntersectionObserver即可解决这种烦恼。
概念
Intersection Observer API 提供了一种异步检测目标元素与祖先元素或viewport相交情况变化的方法。浏览器显示页面的时候，首先会用js处理逻辑，然后进行样式计算及布局，在内存里面形成之后会画我们的屏幕上去，这一个过程就叫1帧，如果1帧中任一个阶段占用的时间过长，就会影响到我们的平均帧率，导致掉帧等。
本文共计817个文字，预计阅读时间需要4分钟。
目录+前言+概念+使用+注意事项+前言+在日常开发过程中，有时会遇到需要判断某些节点是否进入可视化区域的需求。例如：判断信息是否在可视区域显示再进行展示，图片是否加载等。通常
目录
- 前言
- 概念
- 使用
- 注意
前言
在日常的开发过程中，有时候会有一些要求判断节点是否进入可视化区域的需求。例如：判断信息是否在可视区域曝光再进行曝光，图片懒加载等。通常我们可以通过scroll和getBoundingclient来进行判断。
el.offsetTop - document.documentElement.scrollTop <= 视口高度 // 或 el.getBoundingClientRect().top <= 视口高度
但是scroll，getBoundingclient会引起回流，计算过于频繁可能会引起很大的性能问题，例如用户在使用的过程中，滑动卡顿啊等。那么有没有更好的办法来代替判断是否进入可视化区域呢？使用IntersectionObserver即可解决这种烦恼。
概念
Intersection Observer API 提供了一种异步检测目标元素与祖先元素或viewport相交情况变化的方法。浏览器显示页面的时候，首先会用js处理逻辑，然后进行样式计算及布局，在内存里面形成之后会画我们的屏幕上去，这一个过程就叫1帧，如果1帧中任一个阶段占用的时间过长，就会影响到我们的平均帧率，导致掉帧等。