Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

feat: persist sidebar scroll position across page navigations

Abierto
#74 0 comentarios 0 reacciones 0 asignados Ver en GitHub

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
Área
frontend, web-dev

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

  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.
Lenguaje dominante
JavaScript
Estrellas
29
Forks
165
Merge medio
1 d 18 h
PR fusionados (30 d)
2

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de nodejs/learn

Todos los issues de nodejs/learn

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.