Restore scroll position of elements on page navigation
npm install @epic-web/restore-scroll
The <body> isn't the only thing that scrolls. When the user scrolls a list, then navigates back and forth, you may want to keep their scroll position where it was when they left. This library makes that easy.
``
npm install @epic-web/restore-scroll
[![Build Status][build-badge]][build]
[![MIT License][license-badge]][license]
[![Code of Conduct][coc-badge]][coc]
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
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
).This depends on React Router's
useNavigation and useLocation hooks. It could
probably be generalized to work with other routers. PRs welcome.Demo
Note: this demo is based on Remix, but will work with React Router as well.
Usage
`tsx
import { ElementScrollRestoration } from '@epic-web/restore-scroll'return (
- 🎁
- 🎂
- 🎉
{/ ... /}
)
`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:
tsx
direction="horizontal"
/>
`Tips:
1. This requires an inline script, so you'll need to pass a
if you're
using a Content Security Policy that requires this.
2. Make certain to place the ElementScrollRestoration component _after_ the
element you want to restore the scroll position of. This is because the
component will render a