feat: persist sidebar scroll position across page navigations
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Aptitud para principiantes
- 72/100
- Tipo de issue
- Nueva funcionalidad
- Claridad
- Bien especificado
- Estado de actividad
- Tranquilo
- Stack tecnológico
- javascript
Línea de trabajo
Comienza leyendo components/Sidebar/index.jsx, hooks/useScrollToElement.js y hooks/useScroll.js para entender el manejo existente de ref y del desplazamiento. Verifica que la navegación conserve la posición de la barra lateral y que una actualización completa la restaure desde localStorage, cubriendo las secciones Node-API, Diagnostics o Asynchronous Work.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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.
- Lenguaje dominante
- JavaScript
- Estrellas
- 29
- Forks
- 165
- Merge medio
- 1 d 18 h
- PR fusionados (30 d)
- 2
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de nodejs/learn
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 74/100
-
Dificultad 3/5 1-2 días Aptitud para principiantes 25/100
-
Add an issue template Abierto
Dificultad 3/5 1-2 días Aptitud para principiantes 35/100
-
Dificultad 3/5 1-2 días Aptitud para principiantes 65/100
-
Dificultad 3/5 1-2 días Aptitud para principiantes 45/100
Todos los issues de nodejs/learn
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
-
Theme loads third-party resources on every page (jsdelivr web font, cdnjs Font Awesome) – GDPR Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
docToolchain/docToolchain#1705 ·
-
Timezone select lists one option per character; duplicate "Failed" reason; shared tracker popover id Abiertobug
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
nightscout/nocturne#1414 ·
-
bug v2
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
modelcontextprotocol/inspector#2458 · 1 comentario ·
-
Mend: dependency security vulnerability status: needs triage 🕵️♀️
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
carbon-design-system/ibm-products#9907 ·