温馨提示：本文目前仅适用于在 Chrome 51 及以上中浏览。 2016.11.1 追加，Firefox 52 也已经实现。 2016.11.29 追加，Firefox 的人担心目前规范不够稳定，未来很难保证向后兼容，所以禁用了这个 API，需要手动打开 ...

背景 在网页开发的过程中，我们常常需要判断某个元素是否进入了"视口"（viewport），即用户能不能看到它。 一般采用这样的方法实现，兼容scroll事件，然后调用方法获取目标元素的坐标，判断是否在视口之内。代码不仅繁琐，而且由于scroll事件密集发生，计算量很大一不小心没有函数去抖就又 ...

无限滚动 很多人以为无限滚动，就是只是触底加载，但是加载到一定长度，页面会爆炸！！ 真正的无限加载是真正的无限！ 页面仅渲染可见的元素，对不可见的不占用页面节点，才可实现真正的无限滚动。 ...

IntersectionObserver callback callback 一般会触发两次,一次是目标进入视口(可见),另一次是完全离开(不可见) 每一个属性的含义 time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒 target：被观察的目标 ...

1，boundingClientRect：目标边界。这个目标，就是我们的观察对象，可以看到刚开始相交的时候，它的位置情况。这个位置是相对于整个页面的 ...

使用IntersectionObserver就行了，使用起来简单方便，而且性能上也比监听滚动事件要好很多 ...

基于 IntersectionObserver 异步监听方法，实现无线信息流下拉加载， https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver ...

网页开发时，常常需要了解某个元素是否进入了"视口"（viewport），即用户能不能看到它。 上图的绿色方块不断滚动，顶部会提示它的可见性。 传统的实现方法是，监听到scroll事件后，调用目 ...