React Three Fiber滚动行为异常，寻求技术修复帮助

问题根源分析 #

你的页面结构（Website→Canvas→NativeHTMLContent→Canvas→Website）出现滚动重置、嵌套滚动异常，核心原因是Canvas组件内部可能存在全局滚动事件的强制修改，或是Canvas容器与页面全局滚动层级冲突，导致滚动行为被中断或重置。

具体修复步骤 #

1. 移除Canvas内的全局滚动控制逻辑 #

打开hero.tsx，检查是否存在修改document.documentElement.scrollTop或window.scrollTo的代码（常见于useFrame钩子中的动画同步逻辑）。这类代码会强制篡改页面滚动位置，导致滚动条重置。

• 错误示例（需删除/修改）：

useFrame((state) => {
  document.documentElement.scrollTop = state.scroll.y * 0.5;
});

• 修正方向：仅基于页面滚动值（如useScroll返回的scroll.y）做Canvas内部的模型动画（位移、缩放等），不要主动修改页面滚动位置。

2. 统一页面滚动层级 #

在index.tsx中调整Canvas容器的CSS样式，避免嵌套滚动冲突：

• 给Canvas容器设置固定高度（如100vh），并禁用局部滚动：

.hero-canvas-container {
  height: 100vh;
  overflow: visible;
}

• 确保nonHeroContainer没有设置overflow: scroll/auto，让所有内容处于页面全局滚动流中。

3. 修正useScroll的使用方式 #

如果使用了@react-three/drei的useScroll，确保监听的是全局页面滚动，而非Canvas局部容器：

import { useScroll } from '@react-three/drei';

const scroll = useScroll(); // 默认绑定window，不要传入局部容器ref

useFrame(() => {
  // 基于scroll.y实现Canvas内的动画响应，而非控制滚动
  if (mesh.current) {
    mesh.current.position.y = -scroll.y * 0.1;
  }
});

4. 允许滚动事件冒泡到页面 #

检查Canvas组件的onWheel事件处理，移除阻止默认滚动行为的代码：

<Canvas 
  // 移除e.preventDefault()，让页面正常接收滚动事件
  onWheel={(e) => {
    // e.preventDefault(); // 删除这行
  }}
>
  {/* 场景内容 */}
</Canvas>

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