# @bigbinary/react-scroll-sync 中文文档

规范地址：https://npmcn.com/package/%40bigbinary/react-scroll-sync/

版本：1\.0\.0
npm 元数据更新时间：2024-11-11T17:52:35.472Z
中文译文更新时间：2026-11-08T01:58:52.522Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：139 kB，16 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：1 个
- peer 依赖：react 16\.x \|\| 17\.x \|\| 18\.x，react-dom 16\.x \|\| 17\.x \|\| 18\.x
- 首次发布：2024-11-11T17:52:34.785Z
- 最新版本发布：2024-11-11T17:52:35.111Z
- 近 30 天下载量：35791（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

在多个可滚动容器上同步滚动位置

## 安装

```sh
npm install @bigbinary/react-scroll-sync
```

也可以使用：`pnpm add @bigbinary/react-scroll-sync`、`yarn add @bigbinary/react-scroll-sync`、`bun add @bigbinary/react-scroll-sync`

## README

# 反应- 滚动- 同步

在多个可滚动元素之间同步滚动位置

## 演示

[http://react-sync-scroll.netlify.com/ (原始内容存档于2018-12-22)](http://react-sync-scroll.netlify.com/)

## 文档示例( E)

[http://react-sync-scroll.netlify.com/ (原始内容存档于2018-12-22)](http://react-sync-scroll.netlify.com/)

## 许可证

麻省理工学院

## 安装

```bash
npm install --save react-scroll-sync
```

## 使用量

```jsx
import React, {Component} from 'react';
import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';

export default class MyComponent extends Component {
    
    render() {
      <ScrollSync>
        <div style={{ display: 'flex', position: 'relative', height: 300 }}>
          <ScrollSyncPane>
            <div style={{overflow: 'auto'}}>
              <section style={{ height: 500 }}>
                <h1>Left Pane Content</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
                  dolorum
                  est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
                  possimus quasi rerum sed soluta veritatis.</p>
              </section>
            </div>
          </ScrollSyncPane>

          <ScrollSyncPane>
            <div style={{overflow: 'auto'}}>
              <section style={{ height: 1000 }}>
                <h1>Middle Pane Content</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
                  dolorum
                  est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
                  possimus quasi rerum sed soluta veritatis.</p>
              </section>
            </div>
          </ScrollSyncPane>

          <ScrollSyncPane>
            <div style={{overflow: 'auto'}}>
              <section style={{ height: 2000 }}>
                <h1>Right Pane Content</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
                  dolorum
                  est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
                  possimus quasi rerum sed soluta veritatis.</p>
              </section>
            </div>
          </ScrollSyncPane>
        </div>
      </ScrollSync>

        );
    }
}
```

## 常见问题

### @bigbinary/react-scroll-sync 是什么？

在多个可滚动容器上同步滚动位置

### 如何安装 @bigbinary/react-scroll-sync？

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

### @bigbinary/react-scroll-sync 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bigbinary\_\_react-scroll-sync 是否存在。

### @bigbinary/react-scroll-sync 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @bigbinary/react-scroll-sync 可以商用吗？

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

### @bigbinary/react-scroll-sync 的下载量有多少？

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

### @bigbinary/react-scroll-sync 还在维护吗？

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