Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

feat: persist sidebar scroll position across page navigations

未关闭
#74 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
72/100
Issue 类型
功能
描述清晰度
描述清楚
活跃度
冷清
技术栈
javascript
领域
frontend, web-dev

调研方向

首先阅读 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

  1. Fix ref acquisition – Use useLayoutEffect in Sidebar/index.jsx to manually assign sidebarRef.current
    to the rendered <aside> element before useEffects run, ensuring the scroll listener is properly attached.

  2. Persist scroll position – Extend useScrollToElement to:

    • Save the sidebar scroll position to localStorage on every scroll event (debounced).
    • On mount, restore from NavigationStateContext (same-session navigation) or fall back to localStorage
      (full page refresh), whichever is available.

Files Changed

  • components/Sidebar/index.jsx – use useLayoutEffect to acquire ref to <aside>
  • hooks/useScrollToElement.js – add localStorage read on mount and write on scroll
  • hooks/useScroll.js – use onScrollRef pattern to avoid stale closure on onScroll callback

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

  • SideBar from @node-core/ui-components needs to support forwardRef for this to work without
    the useLayoutEffect workaround. A separate issue/PR upstream on that package may be worth considering.
  • The useScroll hook dependency on ref.current (instead of ref) ensures the listener is attached
    after the DOM element is available.
主要语言
JavaScript
星标
29
派生
165
平均合并
1 天 18 小时
30 天内合并 PR
2

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

nodejs/learn 的其他 Issue

查看 nodejs/learn 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。