使用 IntersectionObserver API 遇到的一些问题

root 设指定为 document.body 时不会触发更新

上面的示例中， 滚动页面后， .box 的颜色会随着交叉面积的比例更新而变化，如果将 , root: document 改为 root: document.body， 会发现滚动页面后不会触发更新：

MDN 关于 root 参数用法中描述了 root 是被监听目标的祖先元素， 很显然，这里的 document.body 也是每个 .box 的祖先元素，但是实际上不起作用。

还有一个现象，就是通过 document.body.addEventListener('scroll', listener) 方法无法监听到滚动事件， 我想这两个问题很可能是存在着某种关联关系，目前还没有找到相关资料可以说明缘由~~