如何在 NextJS 13 中的每个组件上使用机车滚动？

问：

我正在用 nextjs 13 和机车卷轴为自己制作主页。 但是，有一些问题。 [机车版：机车卷轴v5]

我想知道如何在同一页面的不同组件中使用机车滚动回调。

这是我的 [组件/MainService.js] 代码

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

const MainService = () => {    
      
  function onScroll2({ scroll, limit, velocity, direction, progress }) {
      console.log('service callback');
  }

  useEffect(() => {    

    (async() => {
        const LocomotiveScroll = (await import('locomotive-scroll')).default;
        const locomotiveScroll =  new LocomotiveScroll({              
          scrollCallback: onScroll2,
        });
    })()
    
  }, []);    

  return (
    <div className='main_service_area py-20 lg:py-24 transition-all duration-1000' data-scroll data-scroll-repeat>
      <div className='mmn_layout_inner'>            
          <h2 className='mmn_section_xl_t text-white'>SERVICE</h2>           
        <div className='service_contents' style={{height: '900px'}}>
          service contents..
        </div>
      </div>
      
    </div>
  )
}

export default MainService

接下来是同一页面中的 anoter 组件 [components/MainAbout.js.js]

'use client'

import { useEffect, useState } from 'react';
import ReactPlayer from 'react-player'

function MainAbout() {
  const [isWindow, setIsWindow] = useState(false);

  useEffect(() => {
    setIsWindow(true);

    function onScroll({ scroll, limit, velocity, direction, progress }) {
      console.log('about callback');
  }

    (async() => {
        const LocomotiveScroll = (await import('locomotive-scroll')).default;
        const locomotiveScroll =  new LocomotiveScroll({              
          scrollCallback: onScroll,
        });    
               
    })()
    
  }, []);


  return (
    <>
    <div className='mmn_layout_inner main_about_texts'>
      <h2 className='mmn_section_t text-center break-keep'>About</h2>
     
    </div>
    <div className='main_about_video mt-16 lg:mt-40 relative'  data-scroll
          data-scroll-event-progress='progressEvent' data-scroll-position='start,start' data-scroll-offset='20%,20%'>
      <div className='main_video_cover video_cover_left absolute w-1/2 h-[102%] top-0 left-0 bg-white z-10 origin-left' id='coverProgress'></div>
      <div className='main_video_cover video_cover_left absolute w-1/2 h-[102%] top-0 right-0 bg-white z-10 origin-right'></div>

      {
        isWindow && (
          <div className='mmn_layout_inner'>
            <ReactPlayer
            className='main_about_video_inner'
            url='https://www.youtube.com/watch?v=w5nEf-HahZM'
            width={1200}
            height={800}
            controls={false}
            muted={true}
            loop={true}
            playing={true}
          />
          </div>
          
        )
      }      

    </div>    

    </>
    
  )
}

export default MainAbout

总之 在同一页面中使用多个组件，每个组件导入并定义机车滚动。目前，它不是一个对所有组件都操作的回调函数， 我想要一个只适用于特定组件的回调函数。换句话说，我想要一个仅在特定组件区域运行的回调函数，而不是在所有滚动区域中运行。你能给我一些建议吗？