---
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`.

## useCustomScrollViewTint

Хук, который добавляет тени к краям прокручиваемой области через CSS-маску (`maskImage`).
Маска реагирует на положение прокрутки: тень появляется только у тех краёв, за которыми
есть ещё контент.

Хук возвращает объект с тремя свойствами, которые нужно передать прокручиваемому элементу:

- `getRootRef` — референс на прокручиваемый элемент;
- `onScroll` — обработчик события `scroll`;
- `style` — объект стилей с `maskImage` и `maskComposite` (необходимо применить к прокручиваемому элементу).

{/* @example-description: Подсветка краёв прокручиваемой области через useCustomScrollViewTint. */}
<Playground style={{ height: 150 }}>
  ```jsx
  const { getRootRef, onScroll, style } = useCustomScrollViewTint();

  return (
    <CustomScrollView getRootRef={getRootRef} onScroll={onScroll} style={style}>
      {['Say', 'Hello', 'To', 'My', 'Little', 'Friend'].map((item) => (
        <Cell key={item} before={<Avatar />}>
          {item}
        </Cell>
      ))}
    </CustomScrollView>
  );
  ```
</Playground>

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

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `enableHorizontalScroll` | `boolean` | `false` | Включение отображения горизонтального скролла. |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `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). |