epicweb-dev / epicweb-dev/restore-scroll

Clarify browser behaviour

Open
#8 4 comments 0 reactions 0 assignees View on GitHub
help wanted
Dominant language
TypeScript
Stars
260
Forks
6
PR merge metrics
No merged PRs in 30d

Description

Hey! 👋 I just wanted to drop a note about something in the documentation that I think is incorrect:

> If the user scrolls a list, then navigates back and forth, the browser will scroll the page to the top, but the list will still be scrolled to the position it was at when the user left the page.

Browsers _can_ actually restore scroll positions for nested scroll containers. Here's a reduced test case to demonstrate that scroll restoration does work for non-body aka nested scroll containers: https://codepen.io/OliverJAsh/pen/bGPqyRw

Relevant specs:

- https://html.spec.whatwg.org/multipage/browsing-the-web.html#restore-persisted-state
- https://html.spec.whatwg.org/multipage/browsing-the-web.html#restorable-scrollable-regions

I think the issue you're referring to is what happens when an element is removed from the DOM after leaving one page and then restored when navigating back. In this case, the browser can't restore scroll because it has no way of knowing that we're remounting the same element as before. Reduced test case: https://codepen.io/OliverJAsh/pen/gONmJZM

Perhaps we could clarify this in the documentation? Or perhaps I've misunderstood 😄

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.