Intersection Observer API 是浏览器提供的用于监听目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的接口。它能够在性能更好的条件下监测目标元素，以替代传统的 scroll、resize 等事件监听方式，特别是对于一些需要频繁操作的场景。
该 API 对于前端开发者来说，在实现如懒加载、图片占位符、自动播放等功能时具有很高的应用价值。
特性
- 监听某个元素是否进入了视窗或离开了视窗
- 无需轮询，可提高性能
- 支持同时监听多个目标元素，也可以监听整个文档视窗
使用示例
监听单个元素
----- ------ - -------------------------------
----- ------- - -
----- ----- -- ------------
----------- ------ -- -----------
---------- --- -- --------------- ------
--
----- -------- - --- ------------------------------ --------- -- -
--------------------- -- -
-- ---------------------- - -- --------
-- -- ---------
- ---- -
-- -- ---------
-
---
-- ---------
-------------------------监听多个元素
----- ------- - ----------------------------------
----- ------- - -
----- -----
----------- ------
---------- ---
--
----- -------- - --- ------------------------------ --------- -- -
--------------------- -- -
-- ---------------------- -
-- -- ---------
- ---- -
-- -- ---------
-
---
-- ---------
---------------------- -- -
-------------------------
---注意事项
- Intersection Observer API 尚未被所有浏览器完全支持，在使用时需考虑到兼容性问题。
- 在一些特定场景下，如通过 transform、opacity 等属性使元素不可见时，可能无法触发监听回调。
总的来说，Intersection Observer API 为前端开发者提供了更方便、更高效的视窗交叉监听方式，希望本文能对读者有所启发。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12476