root 设指定为 document.body
时不会触发更新
上面的示例中, 滚动页面后, .box
的颜色会随着交叉面积的比例更新而变化,如果将 , root: document
改为 root: document.body
, 会发现滚动页面后不会触发更新:
MDN 关于 root
参数用法中描述了 root
是被监听目标的祖先元素, 很显然,这里的 document.body
也是每个 .box
的祖先元素,但是实际上不起作用。
还有一个现象,就是通过 document.body.addEventListener('scroll', listener)
方法无法监听到滚动事件, 我想这两个问题很可能是存在着某种关联关系,目前还没有找到相关资料可以说明缘由~~