---
description: Компонент, который унифицирует браузерную полосу прокрутки на всех платформах.
tags: layout
---

<Overview group="utils">

# CustomScrollView [tag:component]

Компонент, который унифицирует браузерную полосу прокрутки на всех платформах.

</Overview>

> Обратите внимание, что используются нативные стили для изменения полосы прокрутки.
> Важно, что данная стилизация не работает для браузера `Firefox` < `64` версии,
> и в нём будет показана стандартная полоса прокрутки.

{/* @example-description: Вертикальная прокрутка списка элементов с кастомной полосой скролла. */}
<Playground style={{ height: 150 }}>
  ```jsx
  <CustomScrollView>
    {['Say', 'Hello', 'To', 'My', 'Little', 'Friend'].map((item) => (
      <Cell key={item} before={<Avatar />}>
        {item}
      </Cell>
    ))}
  </CustomScrollView>
  ```
</Playground>

## Прокручиваемый контент

Контент, который требует полосы прокрутки, необходимо передавать в свойство `children`.

## Параметры прокрутки

### `overscrollBehavior`

Свойство `overscrollBehavior` отвечает за поведение при достижении границы области прокрутки.
Подробнее с поведением и значениями можно ознакомиться в [документации overscrollBehavior](https://developer.mozilla.org/ru/docs/Web/CSS/overscroll-behavior).

### `scrollBehavior`

Свойство `scrollBehavior` отвечает за анимацию прокрутки.
Подробнее с поведением и значениями можно ознакомиться в [документации scroll-behavior](https://developer.mozilla.org/ru/docs/Web/CSS/scroll-behavior).

### Скрытие полосы прокрутки

Свойство `scrollbarHidden` позволяет управлять видимостью полосы прокрутки.

- `true` — полоса прокрутки скрыта;
- `false` — полоса прокрутки видна (по умолчанию).

## Горизонтальная полоса прокрутки

Свойство `enableHorizontalScroll` позволяет отображать горизонтальную полосу прокрутки.

- `true` — горизонтальная полоса прокрутки видна;
- `false` — горизонтальная полоса прокрутки скрыта (по умолчанию).

{/* @example-description: Горизонтальная прокрутка контента с включенным `enableHorizontalScroll`. */}
<Playground>
  ```jsx
  <CustomScrollView enableHorizontalScroll>
    <Flex gap="m" noWrap>
      {Array.from({ length: 20 }).map((_, index) => (
        <Avatar key={index} size={56} />
      ))}
    </Flex>
  </CustomScrollView>
  ```
</Playground>

## Обработчики событий

Компонент позволяет обрабатывать событие `scroll`, возникающее при прокрутке контента, через свойство `onScroll`.

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `**children** \*` | `ReactNode` | `-` | Содержимое. |
| `className` | `string` | `-` | `className` для компонента. |
| `enableHorizontalScroll` | `boolean` | `false` | Включение отображения горизонтального скролла. |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `onScroll` | `((event: UIEvent<HTMLDivElement, UIEvent>) => void)` | `-` | Обработчик события `scroll`. |
| `overscrollBehavior` | `"none" \| "auto" \| "contain"` | `auto` | Поведение overscroll, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior). |
| `scrollbarHidden` | `boolean` | `false` | Скрытие скроллбара.  > В версии ниже Firefox 64 будет виден скролл. |
| `scrollBehavior` | `"auto" \| "smooth"` | `auto` | Поведение scroll-behavior, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior). |