@epic-web/restore-scroll
Advanced tools
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
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.
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 useNavigation and useLocation hooks. It could
probably be generalized to work with other routers. PRs welcome.
Note: this demo is based on Remix, but will work with React Router as well.
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"
/>
nonce if you're
using a Content Security Policy that requires this.ElementScrollRestoration component 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.id and that value can change between navigations,
you may need to specify a key on ElementScrollRestoration to trigger the
inline script to be evaluated again and set the scroll position correctly.MIT
FAQs
Restore scroll position of elements on page navigation
The npm package @epic-web/restore-scroll receives a total of 418 weekly downloads. As such, @epic-web/restore-scroll popularity was classified as not popular.
We found that @epic-web/restore-scroll demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.