85aa0249b9
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 14m10s
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>
60 lines
1.0 KiB
CSS
60 lines
1.0 KiB
CSS
.layout {
|
||
display: flex;
|
||
height: 100%;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.main {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.contentArea {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
/* 关掉浏览器自动 scroll anchoring：往上加载历史时由 handleScroll 里的
|
||
anchor 逻辑统一管，避免浏览器默认的 anchor 与我们手动 +diff 叠加，
|
||
导致慢速滚动 / 慢拖滑动条时页面被推到最底部。 */
|
||
overflow-anchor: none;
|
||
}
|
||
|
||
.emptyArea {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.emptyHint {
|
||
color: var(--color-text-disabled);
|
||
font-size: 14px;
|
||
opacity: 0.4;
|
||
user-select: none;
|
||
}
|
||
|
||
.taskList {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20px;
|
||
padding: 24px 16px;
|
||
}
|
||
|
||
.loadMoreWrap {
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.loadMoreText {
|
||
color: var(--color-text-disabled);
|
||
font-size: 12px;
|
||
}
|
||
|