feat(editor): remember scroll position per scene across navigation - #57
Merged
Merged
Conversation
Switching scenes via the bottom prev/next links reset scrollTop to the cached value the browser happened to have — often partway down the previous scene's content, occasionally at 0 if the new content was shorter. Going back to an earlier scene lost any in-progress position; if the author was reading scene 3, jumped to scene 5 to fix a beat, and came back, scene 3 reappeared at the top. A Map<sceneId, scrollTop> on a ref captures the offset on every scroll tick (passive listener, no re-render). When activeSceneId changes, a second effect reads the saved value and sets scrollTop — or 0 if this is the scene's first visit. The browser clamps an oversized saved value automatically when the new scene's content height is smaller. The map lives on a ref scoped to the route instance; a new upload remounts the route, so positions reset without manual cleanup. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
功能描述
切换场景(底部"上一个/下一个"或左侧场景列表)时:
之前的行为是 `scrollTop` 不动,浏览器把上一个场景的滚动值带到新场景里,半截显示新场景中部;从场景 5 回到场景 3 时之前看到哪里完全丢失。
实现思路
两个 `useRef`:
两个 `useEffect`:
React commit 顺序保证:DOM 提交 → cleanup 旧 listener → 第二个 effect 执行设 scrollTop → 第一个 effect 挂新 listener。restore 时触发的 scroll 事件落在没监听器的窗口里,不会污染 map。
Map 挂在 ref instance 上,作用域是 Editor 路由实例;上传新文件会让 Editor 路由 unmount 重新 mount,map 自动重置,无需手动清空。
测试方式
依赖与复用声明
无新增依赖。复用现有 `flex-1 overflow-auto` 主滚动容器;只新增一个 ref。
Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com