@epic-web/restore-scroll
v1.1.1
Published
Restore scroll position of elements on page navigation
Downloads
918
Readme
npm install @epic-web/restore-scroll
The Problem
When a user navigates to a new page, the browser will scroll the page to the
position it was at when the user left the page. This is a great feature, but
it's not perfect. The browser only scrolls the <body> element. 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.
The Solution
This library provides a way to restore the scroll position of any element on the
page you choose. It does this by storing the scroll position of the element in
session storage and then restoring it when the user navigates back to the page
(very similar to how Remix handles scroll restoration for the <body>).
This depends on React Router's useBeforeUnload, useNavigation, and
useLocation hooks. It could probably be generalized to work with other
routers. PRs welcome.
Usage
import { ElementScrollRestoration } from '@epic-web/restore-scroll'
return (
<div>
<ul id="christmas-gifts">
<li>🎁</li>
<li>🎂</li>
<li>🎉</li>
{/* ... */}
</ul>
<ElementScrollRestoration elementQuery="#christmas-gifts" />
</div>
)And that's it! Now when the user navigates away from the page and then back to it, the list will be scrolled to the position it was at when the user left the page.
You can also specify horizontal scroll for elements like carousels:
<ElementScrollRestoration elementQuery="#christmas-gifts" direction="horizontal" />Tips:
- This requires an inline script, so you'll need to pass a
nonceif you're using a Content Security Policy that requires this. - Make certain to place the
ElementScrollRestorationcomponent after the element you want to restore the scroll position of. This is because the component will render a<script>tag immediately after the element, and that script will run immediately, so the element needs to be in the DOM before the script runs. - If you're computing the
idand that value can change between navigations, you may need to specify akeyonElementScrollRestorationto trigger the inline script to be evaluated again and set the scroll position correctly. - You'll want one of these components for each scrollable element you want to restore the scroll position for.
License
MIT