Next.js 13中如何为各组件设置专属Locomotive Scroll回调？

核心问题在于多组件单独实例化Locomotive Scroll会导致全局滚动事件冲突，正确的思路是全局维护唯一的Scroll实例，再给每个组件绑定专属的回调逻辑，通过判断滚动位置是否落在组件范围内来触发对应操作。

1. 全局初始化单个Locomotive Scroll实例 #

在Next.js 13的根页面或布局组件中（比如app/page.js）创建唯一的Scroll实例，避免多实例引发的滚动计算混乱。

示例代码：

'use client';
import { useEffect, useRef } from 'react';
import LocomotiveScroll from 'locomotive-scroll';

export default function Home() {
  const scrollRef = useRef(null);

  useEffect(() => {
    if (!scrollRef.current) {
      scrollRef.current = new LocomotiveScroll({
        el: document.querySelector('[data-scroll-container]'),
        smooth: true,
        // 其他自定义配置
      });
    }

    return () => {
      if (scrollRef.current) {
        scrollRef.current.destroy();
        scrollRef.current = null;
      }
    };
  }, []);

  return (
    <div data-scroll-container>
      {/* 引入各业务组件并传入全局滚动实例 */}
      <MainService scrollInstance={scrollRef.current} />
      <MainAbout scrollInstance={scrollRef.current} />
    </div>
  );
}

2. 给组件绑定区域监听逻辑 #

在每个组件内部，通过DOM引用获取自身区域的位置信息，在全局滚动事件中判断是否进入该区域，再执行专属回调。

以MainService.js为例：

'use client';
import { useEffect, useRef } from 'react';

export default function MainService({ scrollInstance }) {
  const sectionRef = useRef(null);

  useEffect(() => {
    if (!scrollInstance || !sectionRef.current) return;

    // 组件专属滚动回调
    const handleSectionScroll = (args) => {
      const { scroll } = args;
      const sectionRect = sectionRef.current.getBoundingClientRect();
      const viewportHeight = window.innerHeight;

      // 判断当前滚动位置是否进入组件可视区域（可按需调整逻辑）
      const isInView = (scroll.y + viewportHeight) > sectionRect.top && scroll.y < sectionRect.bottom;

      if (isInView) {
        // 执行当前组件的业务逻辑，比如动画触发、数据加载等
        console.log('MainService 区域滚动触发');
      }
    };

    // 绑定全局滚动事件
    scrollInstance.on('scroll', handleSectionScroll);

    // 组件卸载时移除监听，避免内存泄漏
    return () => scrollInstance.off('scroll', handleSectionScroll);
  }, [scrollInstance]);

  return (
    <section ref={sectionRef} className="main-service">
      {/* 组件内容 */}
    </section>
  );
}

3. 优化触发精度（可选） #

如果需要更精确的触发时机（比如组件完全进入视口才执行逻辑），可调整判断条件：

const isFullyInView = 
  sectionRect.top >= 0 && 
  sectionRect.bottom <= viewportHeight;

也可以利用Locomotive Scroll内置的data-scroll属性，通过事件参数中的target判断：

// 组件根元素添加标识属性
<section ref={sectionRef} data-scroll data-section-id="main-service">...</section>

// 回调中判断目标元素
const handleSectionScroll = (args) => {
  if (args.target.dataset.sectionId === 'main-service') {
    // 执行组件逻辑
  }
};

关键注意事项 #

• 禁止多实例化：单个页面仅保留一个Scroll实例，多实例会导致滚动计算错误、事件重复触发。
• 清理事件监听：组件卸载时必须调用scrollInstance.off()移除对应监听，防止内存泄漏。
• Next.js 13 适配：所有使用Locomotive Scroll的组件都要添加'use client'指令，因为它依赖浏览器DOM API。

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