Прокрутка с исчезновением

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

Утилита scroll-fade состоит исключительно из CSS и основана на shadcn/scroll-fade. Никаких расширений для rxconfig.py не требуется, поскольку он использует синтаксис Tailwind v4.

Установка

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

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

uv run buridan init

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

Класс	Стили
`scroll-fade`	`mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));` `animation-timeline: scroll(self y);`
`scroll-fade-y`	`mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));` `animation-timeline: scroll(self y);`
`scroll-fade-x`	`mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));` `animation-timeline: scroll(self inline);`
`scroll-fade-t`	Маска затухания на верхнем крае. `animation-timeline: scroll(self y);`
`scroll-fade-b`	Маска затемнения по нижнему краю. `animation-timeline: scroll(self y);`
`scroll-fade-l`	Маска затухания на левом краю. `animation-timeline: scroll(self x);`
`scroll-fade-r`	Маска затухания на правом краю. `animation-timeline: scroll(self x);`
`scroll-fade-s`	Маска затухания на начальном крае, зеркальное отображение в RTL. `animation-timeline: scroll(self inline);`
`scroll-fade-e`	Маска исчезновения на конце края, зеркала в RTL. `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

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

import reflex as rx


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 к любому списку, не проверяя, прокручивается ли он.

Item 1

Item 2

Item 3

import reflex as rx


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.

Design

Engineering

Marketing

Product

Research

Sales

Support

Operations

Finance

Legal

People

Security

import reflex as rx

tags = [
    "Design",
    "Engineering",
    "Marketing",
    "Product",
    "Research",
    "Sales",
    "Support",
    "Operations",
    "Finance",
    "Legal",
    "People",
    "Security",
]


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, когда только один край должен отслеживать положение прокрутки.

Inbox triage

Design review

API contract

QA pass

Launch notes

Metrics follow-up

scroll-fade-t

Inbox triage

Design review

API contract

QA pass

Launch notes

Metrics follow-up

scroll-fade-b

Design

Engineering

Marketing

Product

Research

Sales

Support

Operations

scroll-fade-s

Design

Engineering

Marketing

Product

Research

Sales

Support

Operations

scroll-fade-e

import reflex as rx

items = [
    "Inbox triage",
    "Design review",
    "API contract",
    "QA pass",
    "Launch notes",
    "Metrics follow-up",
]

tags = [
    "Design",
    "Engineering",
    "Marketing",
    "Product",
    "Research",
    "Sales",
    "Support",
    "Operations",
]


def scroll_fade_edge_items():
    return rx.el.div(
        *[
            rx.el.div(
                item,
                class_name="rounded-lg bg-muted px-3 py-2.5 text-sm",
            )
            for item in items
        ],
        class_name="flex flex-col gap-1.5 p-1.5",
    )


def scroll_fade_edge_tags():
    return rx.el.div(
        *[
            rx.el.div(
                tag,
                class_name="shrink-0 rounded-xl bg-muted px-4 py-2.5 text-sm",
            )
            for tag in tags
        ],
        class_name="flex w-max gap-1.5 p-1.5",
    )


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

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

scroll-fade-4

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

scroll-fade-24

import reflex as rx


def scroll_fade_size_items():
    return 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(8)
        ],
        class_name="flex flex-col gap-1.5 p-1.5",
    )


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",
    )

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

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- на целевом крае, а также принимают произвольные значения.

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

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

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

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

scroll-fade

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

scroll-fade scroll-fade-none

import reflex as rx


def scroll_fade_none_items():
    return 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(8)
        ],
        class_name="flex flex-col gap-1.5 p-1.5",
    )


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, без использования JavaScript и прослушивателей прокрутки. В браузерах, которые не поддерживают анимацию, управляемую прокруткой, scroll-fade возвращается к статическому затуханию по обоим краям, а утилиты Edge возвращаются к статическому затуханию по выбранному краю.

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

External Tools

︲

On This Page