IntersectionObserver是什么？

IntersectionObserver概览
IntersectionObserver构造器
IntersectionObserver方法
IntersectionObserver懒加载（vue单文件组件简版）
IntersectionObserver吸顶（vue单文件组件简版）
IntersectionObserver触底（vue单文件组件简版）
IntersectionObserver懒加载、吸顶、触底综合（vue单文件组件实战版）
基于Intersection的开源工具 Scrollama
总结
参考资料

IntersectionObserver概览

IntersectionObserver提供了一个方式去异步观察 有一个祖先element或者top-level document viewport的目标element 的交叉变化。
祖先元素或者viewport被当做root节点。
当IntersectionObserver创建出的时候，它会被配置到监听root内部的给定visibility的变化。
一旦IntersectionObserver创建出来，它的配置是不能变的。 所以一个observer object只能用来监测一个指定visibility值的变化。
虽然只能一对一去watch ratio，但是可以在同一个observer中watch多个target elements。也就是说一个visibility ratio可以检测多个不同的elements。

IntersectionObserver构造器

var observer = new IntersectionObserver(callback[, options]);

和其他构造器一样，创建并返回一个新的Intersection对象。
rootMargin如果指定一个特殊值，是为了确保语法是否正确。
阀值是为了确保值在0.0到1.0之间，threshold会按照升序排列。若threshold是空，值为[0.0]。

参数

callback 当目标元素的透明度穿过设定的threshold值时，函数会被调用。callback接受两个参数。
- entries 传入各个threshold值的数组，比该阀值指定的百分比更明显或者更不明显。
- observer 调用callback的observer实例。
options 若options没设置。observer使用document的viewport作为root，没有margin，0%的threshold（意味着即使有1 px的变化也会触发回调）
- root 被当做viewport的元素。
- rootMargin 语法是"0px 0px 0px 0px"
- threshold 指明被监测目标总绑定盒模型的交叉区域ratio，值在0.0到1.0之间；0.0意味着即使是1px也会被当做可见的。1.0意味着整个元素是可见的。默认threshold值是0.0。

IntersectionObserver方法

IntersectionObserver.disconnect() 停止observe一个目标。
IntersectionObserver.observe() 告诉IntersectionObserver一目标元素去observe。
IntersectionObserver.takeRecords() 返回包含所有observe的对象一个数组。
IntersectionObserver.unobserve() 取消observe一个目标对象。

示例

下面的例子在threshold值变化在10%以上时触发myObserverCallback。

let observer = new IntersectionObserver(myObserverCallback, { "threshold": 0.1 });

IntersectionObserver懒加载（vue单文件组件简版）

IntersectionObserver吸顶（vue单文件组件简版）

注意事项：

fixedTopReference是为了避免缓慢移动时add remove .fixed死循环，死循环的结果是抖动
fixedTopHelper是为了避免被吸顶元素没有上一个sibling元素（也就是说被吸顶元素是最上层元素）时，避免缓缓移动时add remove .fixed死循环抖动，特殊引入的标签，需要设置1个px的height
fixedTopHelper需要与被吸顶元素保持样式一致，以确保好的用户体验。例如在本例中将其background设置为#ccc，很好的做到了隐藏

吸顶抖动

IntersectionObserver触底（vue单文件组件简版）

IntersectionObserver懒加载、吸顶、触底综合（vue单文件组件实战版）

上面的例子是为了脱离框架更好的揭示IntersectionObserver的用法本质，如果在实际项目中使用，还需要考虑一些其他问题。

考虑内容如下：

对象拆分，下面拆分出lazyLoad，touchFooter，stickHeader三个对象并新建target和observer来分别标识被监听者和监听者
方法拆分，摒弃全部在mounted方法中变量的定义和赋值操作，很清晰的拆分出createLazyLoadObserver，createTouchFooterObserver，createStickHeaderObserver三个方法
取消监听，新建unobserveAllIntersectionObservers方法，在beforeDestory生命周期内，调用IntersectionObserver的disconnect(),unbserve(target)取消监听目标对象

基于Intersection的开源工具 Scrollama

官方提供了Basic Process，Progress，Sticky Side，Sticky Overlay几种示例。

Basic Process

Progress

Sticky Side

Sticky Overlay

在项目中可以当做适当引用。

项目地址：https://github.com/russellgol...
demo地址：https://russellgoldenberg.git...

总结

主要使用IntersectionObserver实现懒加载图片，触底，吸顶
vue单文件组件简版主要是用于演示，vue单文件组件实战版可用于项目
虽然我这里演示的是vue单文件组件的版本，但是我相信聪明的你知道核心部分在哪里
IntersectionObserver可能还会有其他的用处，来日方长，慢慢探索

参考资料

https://developer.mozilla.org...
https://developer.mozilla.org...
https://developer.mozilla.org...
https://juejin.im/post/5ca15c...
https://medium.com/walmartlab...
https://juejin.im/post/5d6651...
https://github.com/russellgol...

原文地址：IntersectionObserver是什么?

期待和大家交流，共同进步，欢迎大家加入我创建的与前端开发密切相关的技术讨论小组：

SegmentFault技术圈:ES新规范语法糖

SegmentFault专栏：趁你还年轻，做个优秀的前端工程师

知乎专栏：趁你还年轻，做个优秀的前端工程师

Github博客: 趁你还年轻233的个人博客

前端开发QQ群：660634678

微信公众号：人兽鬼 / excellent_developers

努力成为优秀前端工程师！