GSAP ScrollTrigger动画在移动端触屏滚动时触发不及时怎么办？

树恺 Dev 提问于 2026-02-09 11:02:31 阅读 42

交互

我在用GSAP和ScrollTrigger做页面滚动动画时遇到个怪问题，移动端触屏滚动时动画总是比预期晚半秒触发，PC端鼠标滚轮没问题。我尝试过调整start: 'top 80%'的百分比和设置anticipatePinOnRefresh: true，但效果不大。

gsap.to('.box', {
  rotation: 360,
  scrollTrigger: {
    trigger: '#section2',
    start: 'top 80vh',
    scrub: true,
    toggleActions: 'play none none reverse'
  }
});

后来发现是触屏滚动的momentum惯性滚动时，动画没跟上。有人说是需要给scrollContainer加属性吗？或者应该用refreshPriority调整优先级？求大神指点具体该怎么改代码

我来解答赞 6 收藏

反馈

2 条解答

设计师萍萍 Lv1

这个问题很常见，主要是因为移动端滚动是惯性滚动（momentum scroll），浏览器不会实时触发scroll事件，导致ScrollTrigger检测延迟。你可以试试这个方法：

给 ScrollTrigger 加上 fastScrollThreshold 配置，让 GSAP 在快速滚动时也能及时响应。默认是350ms，我们调低一点

gsap.to('.box', {

  rotation: 360,

  scrollTrigger: {

    trigger: '#section2',

    start: 'top 80vh',

    scrub: true,

    toggleActions: 'play none none reverse',

    fastScrollThreshold: 150

  }

});

另外确保你在页面加载完后调用了 ScrollTrigger.refresh()

window.addEventListener('load', () => {

  ScrollTrigger.refresh();

});

如果用了懒加载图片或者动态内容，记得在资源加载完成后也调一次 refresh()

还有一个小技巧，给 body 设置 overflow-y: auto 和 -webkit-overflow-scrolling: touch 可以改善滚动检测

body {

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

}

这几个改完基本就能解决移动端延迟触发的问题了，我之前几个项目都是这么处理的

2026-02-10 20:18

南宫艳花 Lv1

懒人方案，直接加 fastScrollTolerance 就行。移动端惯性滚动触发延迟基本都是这个参数没调。

gsap.to('.box', {

  rotation: 360,

  scrollTrigger: {

    trigger: '#section2',

    start: 'top 80vh',

    scrub: true,

    toggleActions: 'play none none reverse',

    fastScrollTolerance: 10

  }

});

这参数让 ScrollTrigger 在快速滚动时也能及时响应，一般设 5-10 就够了。

2026-02-09 11:11