---
title: "Прокрутка с исчезновением"
description: "Утилиты для добавления эффекта затухания к краям контейнера прокрутки."
order: 0
---
# Прокрутка с исчезновением

Утилиты для добавления эффекта затухания к краям контейнера прокрутки.

>Утилита **scroll-fade** состоит исключительно из CSS и основана на [shadcn/scroll-fade](https://ui.shadcn.com/docs/utils/scroll-fade). Никаких расширений для **rxconfig.py** не требуется, поскольку он использует синтаксис **Tailwind v4**. 

# Установка 

Если ваш проект был настроен с помощью `buridan init`, у вас уже есть прокрутка. Он поставляется с пакетом `buridan`, который CLI импортирует в ваш глобальный файл CSS.

В противном случае установите пакет `buirdan`:

```uv
uv run buridan init
```

# Использование

| Класс | Стили |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| `scroll-fade` | `mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));` <br /> `animation-timeline: scroll(self y);` |
| `scroll-fade-y` | `mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));` <br /> `animation-timeline: scroll(self y);` |
| `scroll-fade-x` | `mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));` <br /> `animation-timeline: scroll(self inline);` |
| `scroll-fade-t` | Маска затухания на верхнем крае. <br /> `animation-timeline: scroll(self y);` |
| `scroll-fade-b` | Маска затемнения по нижнему краю. <br /> `animation-timeline: scroll(self y);` |
| `scroll-fade-l` | Маска затухания на левом краю. <br /> `animation-timeline: scroll(self x);` |
| `scroll-fade-r` | Маска затухания на правом краю. <br /> `animation-timeline: scroll(self x);` |
| `scroll-fade-s` | Маска затухания на начальном крае, зеркальное отображение в RTL. <br /> `animation-timeline: scroll(self inline);` |
| `scroll-fade-e` | Маска исчезновения на конце края, зеркала в RTL. <br /> `animation-timeline: scroll(self inline);` |
| `scroll-fade-<number>` | `--scroll-fade-size: calc(var(--spacing) * <number>);` |
| `scroll-fade-[<value>]` | `--scroll-fade-size: <value>;` |
| `scroll-fade-{t,b,s,e}-<number>` | `--scroll-fade-{t,b,s,e}-size: calc(var(--spacing) * <number>);` |
| `scroll-fade-{t,b,s,e}-[<value>]` | `--scroll-fade-{t,b,s,e}-size: <value>;` |
| `scroll-fade-none` | `--scroll-fade-mask: none;` |

Добавьте `scroll-fade` или `scroll-fade-y` в контейнер прокрутки, т. е. элемент, имеющий overflow-y-auto.

Затухание учитывает прокрутку и отслеживает положение прокрутки:

- В состоянии покоя верхний край четкий, а нижний — бледнеет, намекая на наличие большего количества контента.
– При прокрутке вверху появляется затухание, а в середине прокрутки оба края остаются блеклыми.
- В конце нижний край становится заостренным, показывая, что вы достигли последнего элемента.

Затухание применяется с помощью `mask-image`, поэтому оно растворяет сам контент, а не накладывает цвет. Маска использует линейное затухание от прозрачного к черному, поэтому она адаптируется к любому фону без необходимости настройки. Если ваша область прокрутки находится внутри карточки, поместите фон и рамку на обертку, а `scroll-fade` — на внутренний скроллер, чтобы затухание растворяло содержимое, а не карточку.


# Прокрутка демо-версии Fade

```python
def scroll_fade_demo():
    return rx.el.div(
        rx.el.div(
            rx.el.div(
                *[
                    rx.el.div(
                        f"Item {index + 1}",
                        class_name="rounded-lg bg-muted px-3 py-2.5 text-sm",
                    )
                    for index in range(12)
                ],
                class_name="flex flex-col gap-1.5 p-1.5",
            ),
            class_name="h-72 scroll-fade scrollbar-none overflow-y-auto",
        ),
        class_name="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border border-input",
    )
```

# Нет переполнения, нет исчезновения

Если содержимое не выходит за пределы, затухание не отображается. Вы можете применить `scroll-fade` к любому списку, не проверяя, прокручивается ли он.

```python
def scroll_fade_no_fade():
    return rx.el.div(
        rx.el.div(
            rx.el.div(
                *[
                    rx.el.div(
                        f"Item {index + 1}",
                        class_name="rounded-lg bg-muted px-3 py-2.5 text-sm",
                    )
                    for index in range(3)
                ],
                class_name="flex flex-col gap-1.5 p-1.5",
            ),
            class_name="scroll-fade scrollbar-none overflow-y-auto",
        ),
        class_name="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border border-input",
    )
```

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

Используйте `scroll-fade-x` для контейнеров с горизонтальной прокруткой, то есть для элемента с `overflow-x-auto`.

```python
def scroll_fade_horizontal():
    return rx.el.div(
        rx.el.div(
            rx.el.div(
                *[
                    rx.el.div(
                        tag,
                        class_name="shrink-0 rounded-lg bg-muted px-3 py-2.5 text-sm",
                    )
                    for tag in tags
                ],
                class_name="flex w-max gap-1.5 p-1.5",
            ),
            class_name="scroll-fade-x scrollbar-none overflow-x-auto",
        ),
        class_name="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border border-input",
    )
```

# Краевые затухания

Используйте утилиты Edge, когда только один край должен отслеживать положение прокрутки.

```python
def scroll_fade_edge():
    return rx.el.div(
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    scroll_fade_edge_items(),
                    class_name="h-36 scroll-fade-t scrollbar-none overflow-y-auto",
                ),
                class_name="overflow-hidden rounded-2xl border border-input",
            ),
            rx.el.p(
                "scroll-fade-t",
                class_name="text-center font-mono text-xs text-muted-foreground",
            ),
            class_name="flex flex-col gap-3",
        ),
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    scroll_fade_edge_items(),
                    class_name="h-36 scroll-fade-b scrollbar-none overflow-y-auto",
                ),
                class_name="overflow-hidden rounded-2xl border border-input",
            ),
            rx.el.p(
                "scroll-fade-b",
                class_name="text-center font-mono text-xs text-muted-foreground",
            ),
            class_name="flex flex-col gap-3",
        ),
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    scroll_fade_edge_tags(),
                    class_name="scroll-fade-s scrollbar-none overflow-x-auto",
                ),
                class_name="overflow-hidden rounded-2xl border border-input",
            ),
            rx.el.p(
                "scroll-fade-s",
                class_name="text-center font-mono text-xs text-muted-foreground",
            ),
            class_name="flex flex-col gap-3",
        ),
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    scroll_fade_edge_tags(),
                    class_name="scroll-fade-e scrollbar-none overflow-x-auto",
                ),
                class_name="overflow-hidden rounded-2xl border border-input",
            ),
            rx.el.p(
                "scroll-fade-e",
                class_name="text-center font-mono text-xs text-muted-foreground",
            ),
            class_name="flex flex-col gap-3",
        ),
        class_name="mx-auto flex max-w-xs min-w-0 flex-col gap-6",
    )
```

Edge-утилиты поддерживают прокрутку. Начальные края исчезают после прокрутки от начала, а конечные края исчезают, когда вы достигаете конца. Используйте `scroll-fade-t`, `scroll-fade-b`, `scroll-fade-l` и `scroll-fade-r` для физических границ. Используйте `scroll-fade-s` и `scroll-fade-e` для логических встроенных ребер.

# Размер исчезновения

Глубина затухания по умолчанию равна 12% контейнера и ограничена 40 пикселями, поэтому высокие скроллеры остаются незаметными. Вместо этого используйте `scroll-fade-<number>`, чтобы установить фиксированный размер шкалы интервалов, так же, как работает `scroll-mt-<number>`.

```python
def scroll_fade_size():
    return rx.el.div(
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    scroll_fade_size_items(),
                    class_name="h-48 scroll-fade scrollbar-none overflow-y-auto scroll-fade-4",
                ),
                class_name="overflow-hidden rounded-2xl border border-input",
            ),
            rx.el.p(
                "scroll-fade-4",
                class_name="text-center font-mono text-xs text-muted-foreground",
            ),
            class_name="flex flex-col gap-3",
        ),
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    scroll_fade_size_items(),
                    class_name="h-48 scroll-fade scrollbar-none overflow-y-auto scroll-fade-24",
                ),
                class_name="overflow-hidden rounded-2xl border border-input",
            ),
            rx.el.p(
                "scroll-fade-24",
                class_name="text-center font-mono text-xs text-muted-foreground",
            ),
            class_name="flex flex-col gap-3",
        ),
        class_name="mx-auto flex w-full max-w-xs flex-col gap-6",
    )
```

Для одноразовых значений используйте произвольную длину или процент:

```reflex
rx.el.div(..., class_name="scroll-fade overflow-y-auto scroll-fade-[15%]")
```

Чтобы затухать противоположные края на разную величину, используйте модификаторы для каждого края `scroll-fade-t-<number>`, `scroll-fade-b-<number>`, `scroll-fade-s-<number>` и `scroll-fade-e-<number>`. Они переопределяют Scroll-fade-<number> на целевом краю, а также принимают произвольные значения.

```reflex
rx.el.div(..., class_name="scroll-fade overflow-y-auto scroll-fade-b-8 scroll-fade-t-2")
```

# Отключение фейда

Используйте `scroll-fade-none`, чтобы убрать затухание. Он работает в любом порядке классов, поэтому типичное использование — адаптивное или с сохранением состояния.

```python
def scroll_fade_none():
    return rx.el.div(
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    scroll_fade_none_items(),
                    class_name="h-48 scroll-fade scrollbar-none overflow-y-auto",
                ),
                class_name="overflow-hidden rounded-2xl border border-input",
            ),
            rx.el.p(
                "scroll-fade",
                class_name="text-center font-mono text-xs text-muted-foreground",
            ),
            class_name="flex flex-col gap-3",
        ),
        rx.el.div(
            rx.el.div(
                rx.el.div(
                    scroll_fade_none_items(),
                    class_name="h-48 scroll-fade scrollbar-none overflow-y-auto scroll-fade-none",
                ),
                class_name="overflow-hidden rounded-2xl border border-input",
            ),
            rx.el.p(
                "scroll-fade scroll-fade-none",
                class_name="text-center font-mono text-xs text-muted-foreground",
            ),
            class_name="flex flex-col gap-3",
        ),
        class_name="mx-auto flex w-full max-w-xs min-w-0 flex-col gap-6",
    )
```


# Резервный вариант

Поведение с учетом прокрутки реализовано с помощью [CSS scroll-driven animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), без использования JavaScript и прослушивателей прокрутки. В браузерах, которые не поддерживают анимацию, управляемую прокруткой, `scroll-fade` возвращается к статическому затуханию по обоим краям, а утилиты Edge возвращаются к статическому затуханию по выбранному краю.

Поскольку маска применяется к самому контейнеру прокрутки, видимая полоса прокрутки исчезает вместе с содержимым по краям. Соедините `scroll-fade` с `no-scrollbar`, который поставляется в одном пакете, если вы хотите полностью скрыть полосу прокрутки.