ScrollTrigger在React中滚动到锚点时延迟明显怎么办？

Mc.羽铮提问于 2026-01-29 21:11:25 阅读 45

交互

在React项目里用gsap的ScrollTrigger实现点击跳转锚点，但滚动总是有0.5秒左右的延迟。明明配置了marker能看到标记位置，滚动动画也正常，就是触发时卡一下…

代码是这样的：


import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

const Section = ({ id }) => {
  const sectionRef = useRef(null);

  useEffect(() => {
    gsap.utils.toArray('.link').forEach(link => {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        gsap.to(window, {
          scrollTo: { y: sectionRef.current, autoKill: false },
          duration: 1,
          ease: 'power2.inOut',
          scrollTrigger: {
            trigger: sectionRef.current,
            toggleActions: 'play none none none',
          }
        });
      });
    });
  }, []);

  return ...;
};

export default Section;

试过调整scroller参数、设置anticipatePin在滚动开始前渲染，甚至把gsap升级到最新版，但延迟还是存在。有没有什么配置或结构上的问题容易被忽略？

滚动效果

我来解答赞 5 收藏

反馈

1 条解答

卫利（打工版） Lv1

你的问题我明白，这种延迟确实挺让人抓狂的。我的做法是把 scrollTrigger 的逻辑单独抽出来，不要直接在点击事件里用。这样可以避免重复初始化 ScrollTrigger 导致的性能问题。

另外，gsap.to(window, { scrollTo: ... }) 本身可能会有轻微延迟，可以用更高效的方式实现平滑滚动。试试下面的代码：

import { useEffect, useRef } from 'react';

import { gsap } from 'gsap';

import { ScrollTrigger } from 'gsap/ScrollTrigger';



const Section = ({ id }) => {

  const sectionRef = useRef(null);



  useEffect(() => {

    // 初始化 ScrollTrigger

    gsap.registerPlugin(ScrollTrigger);



    gsap.utils.toArray('.link').forEach(link => {

      link.addEventListener('click', (e) => {

        e.preventDefault();

        gsap.to(window, {

          duration: 1,

          scrollTo: sectionRef.current.offsetTop, // 直接用 offsetTop

          ease: 'power2.inOut'

        });

      });

    });



    return () => {

      ScrollTrigger.kill(); // 清理 ScrollTrigger 避免内存泄漏

    };

  }, []);



  return (

    <section id={id} ref={sectionRef}>

      {/* 内容 */}

    </section>

  );

};



export default Section;

改动点：
1. 去掉了 scrollTrigger 的配置，因为这里不需要复杂的触发逻辑。
2. 直接用 sectionRef.current.offsetTop 获取目标位置，比 { y: sectionRef.current } 更高效。
3. 添加了 ScrollTrigger.kill() 来清理实例。

试一下这个版本，应该能解决延迟问题。如果还有延迟，可能是其他地方的性能瓶颈，比如 CSS 动画或者大图片加载，记得排查一下。

2026-01-31 08:00