Область прокрутки с тонким собственным скроллбаром, у которой края затухают маской. Пока список в самом начале, растворяется только нижний край; стоит прокрутить — появляется затухание и сверху, а у самого конца нижнее исчезает.
Всё работает на чистом CSS через scroll-driven анимации, без обработчиков прокрутки, поэтому эффект не нагружает главный поток. В браузерах без поддержки scroll-driven анимаций область остаётся обычной.
Скопируйте эти файлы в components/scroll-fade-area/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ScrollFadeArea } from "@/components/scroll-fade-area/scroll-fade-area";
export function List() {
return (
<ScrollFadeArea className="h-72 w-64 rounded-xl border" fadeSize={48}>
<div className="space-y-1 p-1">
{Array.from({ length: 20 }).map((_, index) => (
<div key={index} className="rounded-lg bg-foreground/5 px-4 py-2">
Пункт {index + 1}
</div>
))}
</div>
</ScrollFadeArea>
);
}childrenСодержимое области
Тип ReactNode
fadeSize?Глубина затухания краёв в пикселях
Тип number·По умолчанию 40
className?Классы корневого блока
Тип string
...props?Остальные пропсы Radix ScrollArea
Тип ScrollArea.Root