使用 IntersectionObserver API 遇到的一些问题

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

<iframe allowfullscreen="true" allowtransparency="true" frameborder="no" height="300" loading="lazy" scrolling="no" src="https://codepen.io/y1j2x34/embed/vYdjOQZ?default-tab=js%2Cresult&theme-id=dark" style="width: 100%" title="document.body and IntersectionObserver"> See the Pen document.body and IntersectionObserver by y1j2x34 (@y1j2x34) on CodePen. </iframe>

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

<iframe allowfullscreen="true" allowtransparency="true" frameborder="no" height="300" loading="lazy" scrolling="no" src="https://codepen.io/y1j2x34/embed/NWyMGRJ?default-tab=js%2Cresult&theme-id=dark" style="width: 100%" title="IntersectionObserver(root=document.body)"> See the Pen IntersectionObserver(root=document.body) by y1j2x34 (@y1j2x34) on CodePen. </iframe>

其实，还有一个现象，就是通过 document.body.addEventListener('scroll', listener) 方法无法监听到滚动事件， 我想这两个一定是存在着某种关系。

<iframe allowfullscreen="true" allowtransparency="true" frameborder="no" height="300" loading="lazy" scrolling="no" src="https://codepen.io/y1j2x34/embed/XWZaPRX?default-tab=js%2Cresult&theme-id=dark" style="width: 100%" title="document.body.onscroll vs document.body.addEventListener('scroll', ...)"> See the Pen document.body.onscroll vs document.body.addEventListener('scroll', ...) by y1j2x34 (@y1j2x34) on CodePen. </iframe>

标签：body,遇到,y1j2x34,Pen,API,CodePen,IntersectionObserver,document,root
来源： https://www.cnblogs.com/vgerbot/p/16333388.html