JS：IntersectionObserver（监听目标元素是否出现在窗口中）

一、简介

IntersectionObserver 是 JavaScript 中的一个 API，用于异步观察目标元素与其祖先元素或顶级文档视口的交叉状态。当目标元素的可见性发生变化时，你可以使用 IntersectionObserver 来执行某些操作，比如懒加载图片、无限滚动等。 new IntersectionObserver() 是用于创建一个新的 IntersectionObserver 实例的构造函数。当你调用这个构造函数时，你需要传递一个回调函数作为参数，这个回调函数会在交叉状态变化时被调用。

简单的说，这个API能够帮你检测一个元素是否出现在视窗中，从而实现需要的交互效果。

二、基础应用

在下面的代码中，被监测的div每次出现在可视窗口中时都会打印一次"div 现在在视窗中！"

当然，下面的代码会出现滚动条，但是如果不可见，依然算作与视窗无交叉。

  
    
    
    
    
  
  
    
我是被监听的 div