使用IntersectionObserver如何避免边缘相交触发 100vh div可见性检测问题

• threshold: 0的触发规则
  你配置的IntersectionObserver参数中threshold设为0，根据规范，该阈值的触发条件是「目标元素与根元素的相交比例≥0」。哪怕两个元素只是边缘刚好重合、相交面积为0的相切状态，也会被判定为满足触发条件，此时isIntersecting返回true。
• 初始布局的边界重合问题
  你的两个div高度均为100vh，同时body的margin被设为0，也没有其他额外间距，因此第一个div刚好占满整个视口高度，第二个div的顶部边界恰好和视口的底部边界完全重合，刚好符合上述的相切触发规则，所以初始化时就会触发第二个div的可见日志打印。
• 加margin-top:1px后的变化
  给第二个div添加1px上外边距后，它的顶部边界会比视口底部边界低1px，二者完全没有任何相交（连边界重合的状态都不存在），自然不满足触发条件，所以不会打印日志。

修复方案 #

如果要避免这种边缘相切的误触发，可以任选以下两种方案之一：

1. 把threshold调整为极小的大于0的值，比如threshold: 0.001，要求至少有0.1%的元素面积进入视口才会触发回调
2. 调整rootMargin参数，把底部判定边界往上收1px：rootMargin: '0px 0px -1px 0px'，即可排除边界重合的判定场景。

内容的提问来源于stack exchange，提问作者Hans Felix Ramos