水平方向滚动时ScrollTrigger无法触发事件的问题求助

核心问题分析 #

问题根源集中在三点：

• ScrollTrigger默认监听window的垂直滚动，未关联Locomotive Scroll的自定义滚动容器
• 横向滚动的start/end触发条件计算逻辑错误，不符合横向滚动的位置判断规则
• 缺少必要的CSS布局支撑，导致横向滚动结构无法正常工作

修复步骤及代码示例 #

1. 补充CSS布局（必须）

横向滚动需要容器和区块的布局配合，否则Locomotive Scroll的横向滚动无法正常驱动：

[data-scroll-container] {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.section {
  flex: 0 0 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

2. 修改JavaScript代码

gsap.registerPlugin(ScrollTrigger);

const pageContainer = document.querySelector('[data-scroll-container]');

// 初始化Locomotive Scroll
const scroller = new LocomotiveScroll({
  el: pageContainer,
  smooth: true,
  direction: 'horizontal'
});

// 全局设置ScrollTrigger监听自定义滚动容器，避免每个trigger重复配置
ScrollTrigger.defaults({
  scroller: pageContainer
});

// 同步Locomotive滚动事件到ScrollTrigger
scroller.on("scroll", ScrollTrigger.update);

// 处理ScrollTrigger刷新时的容器同步
ScrollTrigger.addEventListener("refresh", () => scroller.update());
ScrollTrigger.refresh();

const sections = gsap.utils.toArray(".section");
sections.forEach((section) => {
  ScrollTrigger.create({
    trigger: section,
    // 横向滚动触发规则：区块左侧对齐视口左侧时触发onEnter
    start: "left left",
    // 区块右侧离开视口左侧时触发onLeave
    end: "right left",
    // 开启标记（可选，调试时查看触发范围）
    markers: true,
    onEnter: () => {
      console.log("onEnter", section.getAttribute('id'));
    },
    onEnterBack: () => {
      console.log("onEnterBack", section.getAttribute('id'));
    },
    onLeave: () => {
      console.log("onLeave", section.getAttribute('id'));
    },
    onLeaveBack: () => {
      console.log("onLeaveBack", section.getAttribute('id'));
    },
  });
});

关键修改说明 #

• 绑定滚动容器：通过ScrollTrigger.defaults全局指定监听Locomotive的滚动容器，替代默认的window监听
• 修正触发逻辑：用left left/right left定义横向滚动的触发点，避免手动计算offsetLeft的误差，更贴合横向滚动的视觉逻辑
• 布局支撑：flex布局确保每个section占满视口宽度，让Locomotive的横向滚动和ScrollTrigger的位置判断都能正常工作
• 调试标记：开启markers: true可以在页面上直观看到触发范围，方便调试触发时机

内容的提问来源于stack exchange，提问作者Hai Truong IT