# @snack-uikit/scroll

> `npm i @snack-uikit/scroll`

Latest version **1.0.1** (published 2026-09-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @snack-uikit/scroll
pnpm add @snack-uikit/scroll
yarn add @snack-uikit/scroll
bun add @snack-uikit/scroll
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2026-09-21 |
| First published | 2023-12-05 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 83 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Сергей Хлупин |
| Maintainers | yetihead, agrigorii, cloud-ru-tech |

## Links

- npm: https://www.npmjs.com/package/@snack-uikit/scroll
- Repository: https://github.com/cloud-ru-tech/snack-uikit
- Homepage: https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/scroll
- Issues: https://github.com/cloud-ru-tech/snack-uikit/issues
- npm.io page: https://npm.io/package/@snack-uikit/scroll

## Dependencies (4)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [overlayscrollbars](https://npm.io/package/overlayscrollbars.md) ^2.11.1
- [@snack-uikit/utils](https://npm.io/package/@snack-uikit/utils.md) ^5.0.0
- [overlayscrollbars-react](https://npm.io/package/overlayscrollbars-react.md) ^0.5.6

## Recent versions

- 1.0.1 (latest) — 2026-09-21
- 1.0.1-preview-acb79d0b.0 (preview) — 2026-09-21
- 1.0.1-preview-b2e4ed46.0 — 2026-09-21
- 1.0.1-preview-27969f64.0 — 2026-09-21
- 1.0.1-preview-fe85442f.0 — 2026-09-18
- 0.11.1-preview-fc6b5b87.0 — 2026-08-20
- 0.11.0 — 2026-05-18
- 0.10.8 — 2026-03-11
- 0.10.8-preview-0aba136f.0 — 2026-03-10
- 0.10.7-preview-ea1a9bc3.0 — 2026-03-04
- 0.10.7 — 2026-03-04
- 0.10.7-preview-c4cc1815.0 — 2026-03-04
- 0.10.7-preview-710d42ae.0 — 2026-03-03
- 0.10.7-preview-eda5f7f0.0 — 2026-03-02
- 0.10.7-preview-896ce44a.0 — 2026-02-27
- … 81 more at https://npm.io/package/@snack-uikit/scroll/versions

## README

# Scroll

## Installation
`npm i @snack-uikit/scroll`

[Changelog](./CHANGELOG.md)

## Description

- Пакет `@snack-uikit/scroll` предоставляет компонент `Scroll` для создания прокручиваемых контейнеров с кастомизируемыми скроллбарами на основе библиотеки OverlayScrollbars.
- Компонент поддерживает различные размеры скроллбаров (`size: "s" | "m"`) и стратегии их скрытия (`barHideStrategy`): всегда показывать, скрывать при уходе курсора, показывать только при скроллинге или при движении курсора.
- Позволяет настроить автоскролл при монтировании и изменении размера контента в направлении вниз (`autoscrollTo: "bottom"`) или вправо (`autoscrollTo: "right"`), что удобно для чатов, логов и динамически обновляемого контента.
- Поддерживает настройку возможности изменения размера контейнера (`resize`): запрет изменения, только горизонтальное, только вертикальное или в обеих координатах.
- Предоставляет возможность отключить клик по скроллбару для прокрутки (`clickScrolling`) и сделать скроллбары недоступными для взаимодействия мышью (`untouchableScrollbars`).
- Компонент возвращает ref на viewport-элемент и поддерживает колбэки для событий скролла (`onScroll`) и инициализации (`onInitialized`).
- Figma: [`Scroll`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=2%3A7&mode=design).

## Example

```tsx
import { Scroll } from '@snack-uikit/scroll';
import { Card } from '@snack-uikit/card';

function Example() {
  return (
    <Scroll
      size="m"
      barHideStrategy="leave"
      autoscrollTo="bottom"
      onScroll={(event) => console.log('Scrolled', event)}
    >
      <div>
        {Array.from({ length: 10 }).map((_, index) => (
          <Card key={index} header={<Card.Header title={`Card ${index + 1}`} />} outline>
            Контент карточки с прокруткой
          </Card>
        ))}
      </div>
    </Scroll>
  );
}
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## setNonce
`setNonce` 

Установить nonce атрибут для инлайн стилей.
## Scroll
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| className | `string` | - | CSS-класс |
| size | enum Size: `"s"`, `"m"` | m | Размер скролбаров |
| clickScrolling | `boolean` | true | Скролить ли по клику в скроллбар. |
| autoscrollTo | enum AutoscrollTo: `"bottom"`, `"right"` | - | Включает автоскрол при маунте и изменении размера контента: <br> - `bottom` - автоскрол вниз, <br> - `right` - автоскрол вправо, |
| barHideStrategy | enum BarHideStrategy: `"never"`, `"leave"`, `"scroll"`, `"move"` | leave | Управление скрытием скролл баров: <br> - `Never` - показывать всегда <br> - `Leave` - скрывать когда курсор покидает компонент <br> - `Scroll` - показывать только когда происходит скроллинг <br> - `Move` - показывать при движении курсора над компонентом |
| onScroll | `(event?: Event) => void` | - | Колбек события скрола. |
| resize | enum Resize: `"none"`, `"horizontal"`, `"vertical"`, `"both"` | none | Настройка возможности регулировать Scroll-контейнер: <br> - `None` - нельзя изменять размер <br> - `Horizontal` - можно изменять размер только по горизонтали <br> - `Vertical` - можно изменять размер только по вертикали <br> - `Both` - можно изменять размер в обеих координатах |
| untouchableScrollbars | `boolean` | - | Отключает возможность взаимодействовать со скролбарами мышью. |
| paddingAbsolute | `boolean` | - | Должны ли паддинги быть абсолютными |
| onInitialized | `() => void` | - | Коллбэк вызывающийся на инициализацию скролла |
| ref | `LegacyRef<HTMLElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
| key | `Key` | - |  |


[//]: DOCUMENTATION_SECTION_END

---
_Source: https://npm.io/package/@snack-uikit/scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._