IntersectionObserver使用的几个注意点

最近在使用IntersectionObserver时发现有几个需要注意的细节，这里记录整理一下，供大家参考。

关于IntersectionObserver的原理、使用方法、使用场景等方面的介绍，已经有相当多的文章涉及过了，本文就不再重复介绍了。

关于polyfill

我们都知道IntersectionObserver目前在iOS上的兼容是比较差的，只有12.1之后的版本才是原生支持的，显然是不符合兼容要求的（公司要求要兼容到iOS9），安卓还是OK的，5.0以上都原生支持了。因此如果要在移动端使用的话，需要引入polyfill，这里推荐w3c官方的polyfill，链接如下： github.com/w3c/Interse…

rootMargin的值必须指定单位

rootMargin是用于扩展或者缩小rootBounds区域的大小，需要注意的是，rootMargin的值在设置的时候必须要带单位，否则就会导致observer无效，比如如下代码：

const observer = new IntersectionObserver(callback, {
  rootMargin: '100px 0'
})

这段代码就会导致页面报错，因为rootMargin的值必须指定单位，哪怕是0，单位可以是px，也可以是百分号。

这与css的margin属性其实是有差异的，因为如果是一个margin属性，同样按照上面的写法是OK的。

rootMargin负值

负的rootMargin可以将rootBounds的范围缩小，并且会影响交叉的触发，比如我们有如下的页面：