# @epic-web/restore-scroll 中文文档

规范地址：https://npmcn.com/package/%40epic-web/restore-scroll/

版本：2\.0\.0
npm 元数据更新时间：2025-07-02T20:18:52.756Z
中文译文更新时间：2026-11-13T19:41:41.729Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40epic-web/restore-scroll
原文对照：https://npmcn.com/package/%40epic-web/restore-scroll/?lang=original
项目主页：https://github.com/epicweb-dev/restore-scroll#readme
源码仓库：https://github.com/epicweb-dev/restore-scroll

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：9.3 kB，4 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18\.0\.0，react-router \>=7\.0\.0
- 首次发布：2023-11-28T20:53:26.508Z
- 最新版本发布：2025-07-02T20:18:52.324Z
- 近 30 天下载量：6366（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）

## 中文简介

恢复页面导航中元素的滚动位置

## 安装

```sh
npm install @epic-web/restore-scroll
```

也可以使用：`pnpm add @epic-web/restore-scroll`、`yarn add @epic-web/restore-scroll`、`bun add @epic-web/restore-scroll`

## README

# [@ epic- web/ restore- sroll](https://npm.im/@epic-web/restore-scroll)

**恢复页面导航中元素的滚动位置**

这个 `<body>` 不是唯一一个卷轴的东西。 当用户滚动列表,然后回转导航时,您可能想要保持其滚动位置,即离开时的位置. 这个图书馆就容易了.

```
npm install @epic-web/restore-scroll
```

[![](https://github-production-user-asset-6210df.s3.amazonaws.com/1500684/257881576-fd66040b-679f-4f25-b0d0-ab886a14909a.png)](https://www.epicweb.dev/)

* * *

[![Build Status](https://img.shields.io/github/actions/workflow/status/epicweb-dev/restore-scroll/release.yml?branch=main&logo=github&style=flat-square)](https://github.com/epicweb-dev/restore-scroll/actions?query=workflow%3Arelease) [![MIT License](https://img.shields.io/badge/license-MIT%20License-blue.svg?style=flat-square)](https://github.com/epicweb-dev/restore-scroll/blob/main/LICENSE) [![Code of Conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](https://kentcdodds.com/conduct)

## 问题

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

## 解决办法

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

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

## 演示

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/remix-run-remix-fczany?file=app%2Froutes%2F_index.tsx)

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

## 使用量

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

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

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

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

## 提示 :

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

## 许可证

麻省理工学院

## 常见问题

### @epic-web/restore-scroll 是什么？

恢复页面导航中元素的滚动位置

### 如何安装 @epic-web/restore-scroll？

在项目目录运行 npm install @epic-web/restore-scroll，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.0\.0）、react-router（\>=7\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @epic-web/restore-scroll 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @epic-web/restore-scroll 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @epic-web/restore-scroll 可以商用吗？

@epic-web/restore-scroll 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @epic-web/restore-scroll 的下载量有多少？

根据 npm 官方下载统计，@epic-web/restore-scroll 在 2026/10/14 – 2026/11/12 这 30 天内被下载 6,366 次，日均约 212 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @epic-web/restore-scroll 还在维护吗？

最新版本 2\.0\.0 发布于 2025/07/03（1\.4 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/11/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。