Intersection Observer的rootMargin在x轴未按预期生效问题求助

核心原因（90%以上概率） #

你调整的是rootMargin的水平方向参数，但绝大多数图片懒加载场景都是纵向滚动，只有垂直方向的rootMargin参数会生效，水平参数仅对横向滚动的场景有效。

修正方案 #

纵向滚动场景（最常见） #

将你的rootMargin配置调整为垂直方向提前300px触发即可：

const observer = new IntersectionObserver(callback, {
  // 顺序为 上、右、下、左，这里设置下方提前300px检测
  rootMargin: '0px 0px 300px 0px',
  threshold: 0
})

如果你的图片是向上滚动加载（比如瀑布流倒序加载），则调整上方的参数：rootMargin: '300px 0px 0px 0px'。

横向滚动场景 #

如果确实是横向滚动的懒加载场景，按以下步骤排查：

• 确认root参数已设置为实际的横向滚动容器，不能用默认视口（除非是整个页面横向滚动）
• 确认滚动容器存在实际的横向溢出（即内容宽度大于容器宽度，有滚动空间）
• 确认html、body以及滚动容器未设置overflow-x: hidden，会截断水平方向的检测范围
• 确认threshold参数为0，避免阈值要求抵消rootMargin的提前触发效果

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