如何在横向滚动场景下触发Intersection Observer？

完全可以实现，Intersection Observer本身原生支持横向滚动场景的元素交叉检测，无需额外引入第三方依赖，仅需要注意配置项和滚动容器的对应关系即可。

核心逻辑 #

Intersection Observer的交叉判定规则不限制滚动方向，只要监听元素与根元素（默认是浏览器视口，也可自定义为滚动容器）的重叠比例达到设定阈值，就会触发回调函数，纵向、横向滚动场景的底层判定逻辑完全一致。

具体实现步骤 #

• 给承载横向滚动的容器添加overflow-x: scroll样式，确认容器本身是可横向滚动的元素
• 初始化Intersection Observer实例时，把root配置项指定为上述横向滚动容器；如果你的横向滚动是全局视口级别的，可保留root的默认值（即视口）
• 可通过rootMargin配置项调整预触发距离，横向场景下修改左右边距即可，比如设置rootMargin: 0px 50px 0px 50px，就可以让元素距离容器左右边缘还有50px的时候就提前触发回调
• 调用observe()方法绑定需要监听的子元素即可

示例代码 #

// 获取横向滚动容器
const horizontalScrollBox = document.querySelector('.scroll-box');
// 获取需要监听的滚动子元素
const scrollItems = document.querySelectorAll('.scroll-item');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入可视区的自定义逻辑，比如添加动画、曝光统计等
      entry.target.classList.add('active');
    } else {
      // 元素离开可视区的自定义逻辑
      entry.target.classList.remove('active');
    }
  })
}, {
  root: horizontalScrollBox, // 绑定横向滚动容器为检测根节点
  threshold: 0.3, // 元素30%面积进入可视区时触发，可按需调整
  rootMargin: '0px' // 按需调整预触发边距
})

// 绑定所有需要监听的元素
scrollItems.forEach(item => observer.observe(item));

常见注意事项 #

• 必须保证配置的root就是实际产生横向滚动的容器，否则交叉检测会失效
• 做横向无限加载需求时，仅需要监听滚动列表的最后一个元素，触发回调时加载新的列表项即可
• 阈值threshold设置为0时，只要元素有1px进入可视区就会触发回调，适合做元素曝光埋点类需求

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