React Three.js中使用useScroll()时滚动偏移值不一致问题

我正在开发一个基于React Three.js和Theatre.js的应用，集成了@react-three/drei的useScroll钩子捕获滚动信息，但遇到滚动偏移值不一致的问题：向下滚动时，偏移值偶尔会从0变为负数，而非预期的持续正数。

预期行为 #

向下滚动时，滚动偏移值应持续为正数，准确反映从页面顶部滚动的距离。

实际行为 #

初始渲染时偏移值为0符合预期，但开始向下滚动后，偏移值时而为负时而为正，无法保持稳定的正数状态。

代码片段 #

App.jsx #

import { Scroll, ScrollControls, useScroll } from '@react-three/drei';
// ... (其他导入)

function App() {
  return (
    <>
      <Header />
      <main className="h-full w-full overflow-hidden pt-[44px]">
        <Canvas gl={{ preserveDrawingBuffer: true }}>
          <ScrollControls pages={5} damping={0.1}>
            // 每个组件占满100vh
            <Hero />
            <About />
            <Feature />
            <Faq />
            <Contact />
          </ScrollControls>
        </Canvas>
      </main>
    </>
  );
}

Scene.jsx #

import { useScroll } from '@react-three/drei';
// ... (其他导入)

export default function Scene() {
  const scroll = useScroll();
  // ... (其他代码)

  useFrame(() => {
    if (scroll) {
      // 此处返回负数
      const offset = scroll.offset;
      console.log('Scene Component Scroll Offset:', offset);
      // ... (剩余代码)
    }
  });

  return (
    <>
      {/* ... (其他组件) */}
    </>
  );
}

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