npm install @epic-web/restore-scroll

问题

当用户浏览到新页面时,浏览器会滚动页面到 用户离开页面时的位置 。 这是一个伟大的特点,但 这不是完美的。 浏览器只滚动 <body> 键。 如果用户 滚动列表,然后前后导航,浏览器将滚动页面 到顶部,但列表仍会被滚动到它当时的位置 用户离开了页面.

解决办法

此库提供了一个恢复任何元素在 页面。 它通过将元素的滚动位置存储在 会话存储, 当用户返回页面时恢复它 (非常类似于 Remix 如何处理卷轴修复 <body>) (中文(简体) ).

这取决于回放路由器 useNavigation 财务报告和审定财务报表 useLocation 钩子. 可能会 可能被泛指为与其他路由器合作. 公关欢迎.

演示

注:此演示基于Remix,但也会与React Router合作.

使用量

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>
)

就这样! 现在,当用户从网页上浏览到 列表将滚动到用户离开时的位置 页 次.

您也可以指定旋转木马等元素的横向滚动 :

<ElementScrollRestoration
    elementQuery="#christmas-gifts"
    direction="horizontal"
/>

提示 :

1. 这需要内在脚本 所以你需要通过一个 nonce 狦琌 使用要求这样做的内容安全政策.
2. 确定放置 ElementScrollRestoration 组件 之后 页:1 要恢复滚动位置的元素。 这是因为 构成部分将产生 <script> 紧接元素之后的标记,以及 脚本会立即运行,所以元素需要在 DOM 中 在剧本运行前.
3. 如果你在计算 id 而数值可以在导航之间变化, 您可能需要指定一个 key 打开 ElementScrollRestoration 触发 要再次评估的内置脚本并正确设置滚动位置.
4. 您想要每个可滚动元素的其中之一 恢复滚动位置.

许可证

麻省理工学院