Lenis平滑滚动（GSAP）运行异常：求助无需关闭浏览器设置的解决方案

问题根源 #

浏览器原生平滑滚动与你代码中实际使用的LocomotiveScroll自定义滚动逻辑发生冲突，两者同时处理滚动事件，引发了滚动延迟。

解决办法 #

1. 让LocomotiveScroll完全接管滚动，禁用原生平滑滚动 #

初始化时通过配置项关闭原生滚动支持，同时给滚动容器设置正确的CSS样式：

useEffect(() => {
  (async () => {
    const LocomotiveScroll = (await import("locomotive-scroll")).default;
    const locomotiveScroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'), // 需提前在页面根滚动容器上添加该属性
      smooth: true,
      nativeScroll: false, // 禁用浏览器原生滚动，由Locomotive全权处理
      getDirection: true
    });
  })();
  window.scrollTo(0, 0);
}, []);

对应的CSS样式：

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

2. 调整初始化时机，避免内容未加载完成就启动滚动 #

如果页面存在动态渲染内容，延迟初始化滚动工具能避免竞态问题：

useEffect(() => {
  const initScroll = async () => {
    // 等待页面内容渲染完成，可根据实际情况替换为更精准的监听（如DOMContentLoaded）
    await new Promise(resolve => setTimeout(resolve, 100));
    const LocomotiveScroll = (await import("locomotive-scroll")).default;
    const locomotiveScroll = new LocomotiveScroll({
      nativeScroll: false,
      smooth: true
    });
  };
  initScroll();
  window.scrollTo(0, 0);
}, []);

3. 若确实混用了GSAP平滑滚动，需禁用GSAP的原生滚动支持 #

如果你同时启用了GSAP的平滑滚动插件，要确保两者逻辑不冲突：

// 在GSAP初始化时禁用原生平滑滚动
gsap.config({ smoothScroll: false });

重要提示 #

• 页面中只能保留一套滚动处理逻辑，要么用LocomotiveScroll，要么用浏览器原生，禁止同时启用
• 滚动容器的height和overflow样式是LocomotiveScroll正常工作的必要条件

内容的提问来源于stack exchange，提问作者Cauã Wilian Pereira