将Div设为Intersection Observer API根元素失效问题排查

核心问题 #

Intersection Observer的root元素默认overflow为visible，此时它的视口范围等同于整个文档视口（和root:null效果完全一致）。只有当root元素设置了overflow: auto/scroll/hidden这类溢出裁剪属性时，它的视口才会被限定为自身的边界，此时target与root的相交行为才会触发回调。

修复步骤 #

1. 给rootBox添加溢出裁剪属性
   修改CSS中.rootBox的样式，添加overflow: hidden：

.rootBox {
  position: absolute;
  width: 70px;
  height: 70px;
  border: 2px solid rgb(255, 3, 3);
  background-color: rgb(197, 95, 248);
  overflow: hidden; /* 关键：让root视口限定为自身元素边界 */
}

如果需要rootBox支持滚动，可替换为overflow: auto。

2. 可选：修正拼写错误
   回调函数里的参数enrty是拼写错误，改为entry（不影响功能，但代码更规范）：

const obsCallback = function(entries, observer) {
  entries.forEach(entry => console.log('obs works'));
}

验证效果 #

修改后，当targetBox的任何部分进入rootBox的边界范围时，控制台就会输出obs works提示。

内容的提问来源于stack exchange，提问作者Demi76