feat: persist sidebar scroll position across page navigations
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 72/100
- Issue 类型
- 功能
- 描述清晰度
- 描述清楚
- 活跃度
- 冷清
- 技术栈
- javascript
调研方向
首先阅读 components/Sidebar/index.jsx、hooks/useScrollToElement.js 和 hooks/useScroll.js,以了解现有的 ref 和滚动处理方式。验证导航是否保留侧边栏位置,以及硬刷新后是否会从 localStorage 恢复该位置,覆盖 Node-API、Diagnostics 或 Asynchronous Work 部分。
由索引模型根据 Issue 内容生成。
描述
Problem
The sidebar navigation currently resets to the top every time the user navigates between pages.
For readers working through content in sections deep in the sidebar (e.g. Node-API, Diagnostics,
or Asynchronous Work), this means manually scrolling back down after every page visit — which creates
a frustrating and disorienting experience.
Additionally, SideBar from @node-core/ui-components does not support forwardRef, so passing
ref={sidebarRef} to it is silently ignored. This means the scroll restoration logic in
useScrollToElement and useScroll never receives a valid DOM reference to attach the scroll listener to.
Proposed Solution
-
Fix ref acquisition – Use
useLayoutEffectinSidebar/index.jsxto manually assignsidebarRef.current
to the rendered<aside>element beforeuseEffects run, ensuring the scroll listener is properly attached. -
Persist scroll position – Extend
useScrollToElementto:- Save the sidebar scroll position to
localStorageon every scroll event (debounced). - On mount, restore from
NavigationStateContext(same-session navigation) or fall back tolocalStorage
(full page refresh), whichever is available.
- Save the sidebar scroll position to
Files Changed
components/Sidebar/index.jsx– useuseLayoutEffectto acquire ref to<aside>hooks/useScrollToElement.js– add localStorage read on mount and write on scrollhooks/useScroll.js– useonScrollRefpattern to avoid stale closure ononScrollcallback
Expected Behaviour
| Action | Before | After |
|---|---|---|
| Navigate to another page | Sidebar resets to top | Sidebar stays at last scroll position |
| Hard refresh (F5) | Sidebar resets to top | Sidebar restores from localStorage |
Notes
SideBarfrom@node-core/ui-componentsneeds to supportforwardReffor this to work without
theuseLayoutEffectworkaround. A separate issue/PR upstream on that package may be worth considering.- The
useScrollhook dependency onref.current(instead ofref) ensures the listener is attached
after the DOM element is available.
- 主要语言
- JavaScript
- 星标
- 29
- 派生
- 165
- 平均合并
- 1 天 18 小时
- 30 天内合并 PR
- 2
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
nodejs/learn 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 74/100
-
难度 3/5 1-2 天 新手友好度 25/100
-
难度 3/5 1-2 天 新手友好度 35/100
-
难度 3/5 1-2 天 新手友好度 65/100
-
难度 3/5 1-2 天 新手友好度 45/100
相似的 Issue
-
bug confirmed issue
难度 2/5 1-3 小时 新手友好度 75/100
open-webui/open-webui#30750 · 1 条评论 ·
-
难度 2/5 1-3 小时 新手友好度 75/100
-
难度 2/5 1-3 小时 新手友好度 70/100
-
难度 2/5 1-3 小时 新手友好度 75/100
-
Mend: dependency security vulnerability untriaged
难度 2/5 1-3 小时 新手友好度 70/100