这篇文章主要讲如何`监听Dom元素进入视图` , 在某些时候这种需求会经常遇见：例如，1.当你需要实现图片*懒加载*或者*无限滚动*时，需要确定元素是否出现在视窗中；2.当你需要实现某些元素的入场动画时，需要确定元素是否出现在视窗中。然后这可以在事件监听器中处理，最常见的解决方案是使用 `element.getBoundingClientRect()` 和 `IntersectionObserver API` 。 下面介绍这两种的用法 ## 1.案例效果： > 案例: 监听当div标签进入视图时执行动画  ## 2.getBoundingClientRect的用法 1.编写布局 ```html

• item-1
• item-2
• item-3
• item-4
• item-5
div
• item-6
• item-7
• item-8
• item-9
• item-10

``` 2.编写样式 ```css ``` 3.编写js监听DIV元素是否进入视图 ```js ``` 4.执行的效果：  上述代码的问题在于每次调用 `getBoundingClientRect` 时都会触发*回流*，严重地影响了性能。在事件处理函数中调用（ `getBoundingClientRect` ）尤为糟糕，就算使用了函数节流（的技巧）也可能对性能没多大帮助。 在2016年后，可以通过使用[ Intersection Observer ](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)这一 API 来解决问题。它允许你追踪目标元素与其祖先元素或视窗的交叉状态。此外，尽管只有*一部分*元素出现在视窗中，哪怕只有一像素，也可以选择触发回调函数。 ##3.IntersectionObserver的用法 1.编写布局 ```html

• item-1
• item-2
• item-3
• item-4
• item-5
div
• item-6
• item-7
• item-8
• item-9
• item-10

``` 2.编写样式 ```css ``` 3.编写js监听DIV元素是否进入视图 > ``` > const observer = new IntersectionObserver(func, options) > observer.observe( element ) > ``` ```js ``` 4.执行的效果：