# @cloud-ru/ds-scroll 中文文档

规范地址：https://npmcn.com/package/%40cloud-ru/ds-scroll/

版本：1\.0\.7
npm 元数据更新时间：2026-11-11T15:01:23.588Z
中文译文更新时间：2026-11-11T15:23:11.424Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40cloud-ru/ds-scroll
原文对照：https://npmcn.com/package/%40cloud-ru/ds-scroll/?lang=original
项目主页：https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/scroll
源码仓库：https://github.com/cloud-ru-tech/snack-v2

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

- 包体积（解压后）：340 kB，32 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- 首次发布：2026-08-18T12:39:24.020Z
- 最新版本发布：2026-11-11T15:01:23.370Z
- 近 30 天下载量：13797（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：32（近 12 个月 32 个）

## 中文简介

{\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #.

## 安装

```sh
npm install @cloud-ru/ds-scroll
```

也可以使用：`pnpm add @cloud-ru/ds-scroll`、`yarn add @cloud-ru/ds-scroll`、`bun add @cloud-ru/ds-scroll`

## README

# 滚动

`@cloud-ru/ds-scroll` -=YTET -伊甸园字幕组=- 翻译:.

`Scroll` - с с скроллбарами [重叠滚动栏](https://kingsora.github.io/OverlayScrollbars/)。 。 。 .

## Когда

-   Прокручиваемые:боковые也.
-   {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}======================================================================================================================================== -============================================================================================== `autoscrollTo='bottom'`。 。 。 .
-   Контейнер,размер也 `resize='both' | 'horizontal' | 'vertical'`。 。 。 .

Когда **не** использовать:

-   На `<body>` -=YTET -伊甸园字幕组=- 翻译:.
-   {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得怎样.
-   \============================================ ==================================================================================================================================================================================================================.

## Анатомия

### 大小

Толщина: `s` - дефолт и и; `m` -=ytet -伊甸园字幕组=- 翻译:.

### 条形隐藏策略

说得好 `never` - всегда; `leave` - при уводе; `scroll` - только во; `move` . . . . .

### 调整大小

调整了CSS的大小 `resize`数字 : `none` ( , `horizontal`, (中文(简体) ), `vertical`, (中文(简体) ), `both`。 。 。 .

### 自动滚动到

\# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # `bottom` - для и; `right` - 。 。 。 。 .

## Установка

```bash
pnpm add @cloud-ru/ds-scroll
```

```ts
import { Scroll } from '@cloud-ru/ds-scroll'
```

## Примеры

### Базовый

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢.

```tsx
import { Scroll } from '@cloud-ru/ds-scroll';

export function Basic() {
  return (
    <div style={{ height: 200, width: 320 }}>
      <Scroll>
        <div style={{ padding: 8 }}>
          {Array.from({ length: 20 }, (_, i) => (
            <div key={i}>Строка контента {i + 1}</div>
          ))}
        </div>
      </Scroll>
    </div>
  );
}
```

### {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢.

```tsx
import { Scroll } from '@cloud-ru/ds-scroll';

export function SmallSize() {
  return (
    <div style={{ height: 180, width: 280 }}>
      <Scroll size='s'>
        <div style={{ padding: 8 }}>
          {Array.from({ length: 15 }, (_, i) => (
            <div key={i}>Пункт {i + 1}</div>
          ))}
        </div>
      </Scroll>
    </div>
  );
}
```

### {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢

`barHideStrategy="leave"` {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得呢.

```tsx
import { Scroll } from '@cloud-ru/ds-scroll';

export function HideOnLeave() {
  return (
    <div style={{ height: 200, width: 320 }}>
      <Scroll barHideStrategy='leave'>
        <div style={{ padding: 8 }}>
          {Array.from({ length: 20 }, (_, i) => (
            <div key={i}>Строка {i + 1}</div>
          ))}
        </div>
      </Scroll>
    </div>
  );
}
```

### Ресайзируемый

`resize="both"` - пользователь за угол угол угол.

```tsx
import { Scroll } from '@cloud-ru/ds-scroll';

export function Resizable() {
  return (
    <div style={{ height: 200, width: 320 }}>
      <Scroll resize='both'>
        <div style={{ padding: 8 }}>
          {Array.from({ length: 20 }, (_, i) => (
            <div key={i}>Контент, который можно ресайзить — {i + 1}</div>
          ))}
        </div>
      </Scroll>
    </div>
  );
}
```

### Автоскрол

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我们一起来.

```tsx
import { Scroll } from '@cloud-ru/ds-scroll';

export function AutoscrollBottom() {
  return (
    <div style={{ height: 200, width: 320 }}>
      <Scroll autoscrollTo='bottom'>
        <div style={{ padding: 8 }}>
          {Array.from({ length: 40 }, (_, i) => (
            <div key={i}>Сообщение {i + 1}</div>
          ))}
        </div>
      </Scroll>
    </div>
  );
}
```

## 道具

**滚动程序**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `autoscrollTo` | `"bottom"` | `"right"` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢  
  
\- 说吧 `bottom` - автоскрол,вниз,  
  
\- 说吧 `right` - автоскрол,вправо, |
| `barHideStrategy` | `"leave"` | `"move"` | `"never"` | `"scroll"` | `leave` | 说吧  
  
\- 说吧 `Never` - показывать всегда  
  
\- 说吧 `Leave` - скрывать курсор  
  
\- 说吧 `Scroll` - показывать когда  
  
\- 说吧 `Move` - показывать движении над |
| `children` | `string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined` | —— 说 |  |
| `className` | `string` | —— 说 |  |
| `clickScrolling` | `boolean` | `true` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢. |
| `data-test-id` | `string` | —— 说 |  |
| `onInitialized` | `(() => void)` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `onScroll` | `((event?: Event) => void)` | —— 说 | Колбек. |
| `overflow` | `{ x?: "hidden" | "scroll" | "visible" | "visible-hidden" | "visible-scroll"; y?: "hidden" | "scroll" | "visible" | "visible-hidden" | "visible-scroll"; } | undefined` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢? 重叠滚动栏 `scroll`  
(原始内容存档于2019-10-21). qq; (简体中文) `'hidden'`。 。 。 . |
| `paddingAbsolute` | `boolean` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `resize` | `"both"` | `"horizontal"` | `"none"` | `"vertical"` | `none` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢  
  
\- 说吧 `None` - нельзя изменять  
  
\- 说吧 `Horizontal` - можно размер по  
  
\- 说吧 `Vertical` - можно размер по  
  
\- 说吧 `Both` - можно размер размер обеих |
| `size` | `"m"` | `"s"` | `m` | Размер |
| `untouchableScrollbars` | `boolean` | `false` | Отключает. |

#### 相关类型

-   `AutoscrollTo` =: `"bottom"` | `"right"`
    
-   `BarHideStrategy` =: `"leave"` | `"move"` | `"never"` | `"scroll"`
    
-   `Resize` =: `"both"` | `"horizontal"` | `"none"` | `"vertical"`
    
-   `Size` =: `"m"` | `"s"`

## 常见问题

### @cloud-ru/ds-scroll 是什么？

\{\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1\}\# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \# \#\.

### 如何安装 @cloud-ru/ds-scroll？

在项目目录运行 npm install @cloud-ru/ds-scroll，或使用 pnpm add / yarn add / bun add。

### @cloud-ru/ds-scroll 支持 TypeScript 吗？

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

### @cloud-ru/ds-scroll 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @cloud-ru/ds-scroll 可以商用吗？

@cloud-ru/ds-scroll 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @cloud-ru/ds-scroll 的下载量有多少？

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

### @cloud-ru/ds-scroll 还在维护吗？

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