fix: v0.19.5 生成页慢速往上滚仍跳到底部 — 双层 anchor 叠加根因

v0.19.4 只修了 useEffect 的 scrollToBottom 误触, 没修 handleScroll
里的 anchor 累加。用户实测: 鼠标滚轮慢速 / 慢拖滑动条往上翻仍会
跳到最底部, 但快速拽到顶不复现。

根因(双层 anchor 叠加)
1. 浏览器自动 scroll anchoring(默认 overflow-anchor: auto): 滚动
   容器头部插入内容时浏览器自动 scrollTop += diff, 保持视觉位置
2. handleScroll 里 .then 又手动 el.scrollTop += diff
=> 双倍 anchor, 总位移 = 2 * diff, 把 scrollTop 推到 max(底部)

为什么"快速拽不复现, 慢速复现":
浏览器 scroll anchoring 在用户主动 scroll 期间会暂时关闭。快速
拽到顶后立即 loadMore 完成, 浏览器把"用户刚释放"视作仍在 scroll
跳过自动 anchor, 只手动一次, 不叠加。慢速操作时 scroll event 间
有 100~300ms 静止间隔, 浏览器认为 scroll 已停, 自动 anchor 启动
+ 我们手动 anchor = 双倍。

修复(两道防线)
1. CSS: .contentArea 加 overflow-anchor: none, 彻底关掉浏览器自动
   anchor, 由代码统一管 — 这是根因修复
2. handleScroll: 加 loadMoreInFlightRef 防重入 flag, 慢速操作下
   多次进入 if 分支只 schedule 一次 anchor; rAF 完成后清 flag —
   兜底防御, 避免极端时序下 rAF 累加

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/src/components/VideoGenerationPage.module.css

@@ -17,6 +17,10 @@
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
+  /* 关掉浏览器自动 scroll anchoring：往上加载历史时由 handleScroll 里的
+     anchor 逻辑统一管，避免浏览器默认的 anchor 与我们手动 +diff 叠加，
+     导致慢速滚动 / 慢拖滑动条时页面被推到最底部。 */
+  overflow-anchor: none;
 }
 
 .emptyArea {

web/src/components/VideoGenerationPage.tsx

@@ -22,6 +22,9 @@ export function VideoGenerationPage() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const prevLastIdRef = useRef<string | null>(null);
   const initialLoadRef = useRef(true);
+  // 防重入 flag：loadMore + anchor 期间，handleScroll 多次触发不再 schedule 多个 rAF，
+  // 避免 anchor 累加把页面推到底（慢速滚轮 / 慢拖滑动条场景）。
+  const loadMoreInFlightRef = useRef(false);
   const savedScrollTop = useGenerationStore((s) => s.savedScrollTop);
   const saveScrollPosition = useGenerationStore((s) => s.saveScrollPosition);
   const [detailTaskId, setDetailTaskId] = useState<string | null>(null);
@@ -76,15 +79,20 @@ export function VideoGenerationPage() {
     const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
     setShowScrollBottom(distanceFromBottom > 300);
 
-    // Trigger loadMore when scrolled within 100px of the top
+    // Trigger loadMore when scrolled within 100px of the top.
-    if (scrollRef.current.scrollTop < 100) {
+    // ref flag 守卫：只有第一次进入分支时才 schedule loadMore + anchor；
+    // 后续 handleScroll（慢速操作下持续触发）直接跳过，避免多次 rAF 排队累加 +diff。
+    if (scrollRef.current.scrollTop < 100 && !loadMoreInFlightRef.current) {
+      loadMoreInFlightRef.current = true;
       const el = scrollRef.current;
       const prevHeight = el.scrollHeight;
       loadMore().then(() => {
-        // After older tasks are prepended, restore visual position so user doesn't jump
+        // After older tasks are prepended, restore visual position so user doesn't jump.
+        // CSS overflow-anchor: none 已禁用浏览器自动 anchor，由这里独立完成。
         requestAnimationFrame(() => {
           const diff = el.scrollHeight - prevHeight;
           if (diff > 0) el.scrollTop += diff;
+          loadMoreInFlightRef.current = false;
         });
       });
     }