scroll-fade

Utilities for adding a fade effect to the edges of a scroll container.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
Item 31
Item 32
Item 33
Item 34
Item 35
Item 36
Item 37
Item 38
Item 39
Item 40

tsx

scroll-fade — masque le contenu aux bords d'un container scrollable via un mask-image animé par une scroll-driven animation (aucun JS, aucun scroll listener).

Au repos le bord opposé au scroll est net et le bord suivant fond. Pendant le scroll, les deux bords fondent. À la fin, le bord d'arrivée redevient net pour signaler "plus rien après".

Applique scroll-fade (ou scroll-fade-y) au container qui porte overflow-y-auto. Pour un scroll horizontal, utilise scroll-fade-x. Combine avec ScrollArea.

Usage

Class	Styles
scroll-fade	`mask-image` haut + bas, `animation-timeline: scroll(self y)`
scroll-fade-y	Alias de `scroll-fade` pour explicit vertical.
scroll-fade-x	`mask-image` gauche + droite (mirror en RTL), `animation-timeline: scroll(self inline)`
scroll-fade-t	Fade sur le bord haut uniquement.
scroll-fade-b	Fade sur le bord bas uniquement.
scroll-fade-l	Fade sur le bord gauche (physique).
scroll-fade-r	Fade sur le bord droit (physique).
scroll-fade-none	Désactive le fade — utile en variante responsive : `md:scroll-fade-none`.
--scroll-fade-size	Profondeur du fade (défaut : `min(12%, 40px)`). Set via `style="--scroll-fade-size: 24px"`.
--scroll-fade-reveal	Distance de scroll sur laquelle le fade apparaît/disparaît (défaut : `96px`).

No Overflow, No Fade

Si le contenu ne déborde pas, aucun fade ne s'affiche. Tu peux appliquer scroll-fade à n'importe quelle liste sans vérifier avant si elle scrolle.

Item 1
Item 2
Item 3
Item 4

Horizontal Scrolling

Utilise scroll-fade-x sur les containers qui scrollent horizontalement (overflow-x-auto). Le fade horizontal suit la direction de lecture — en RTL, le bord net et le bord fadé s'inversent automatiquement.

Chip 1Chip 2Chip 3Chip 4Chip 5Chip 6Chip 7Chip 8Chip 9Chip 10Chip 11Chip 12Chip 13Chip 14Chip 15Chip 16Chip 17Chip 18Chip 19Chip 20Chip 21Chip 22Chip 23Chip 24

tsx

<div className="scroll-fade-x flex overflow-x-auto">…</div>

Edge Fades

Utilise les utilities de bord quand un seul edge doit suivre la position de scroll. Le start-edge apparaît quand tu t'éloignes du début, le end-edge disparaît quand tu atteins la fin.

scroll-fade-b

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

scroll-fade-t

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

tsx

<div className="scroll-fade-b overflow-y-auto">…</div>

Fade Size

La profondeur par défaut est 12% du container, cappée à 40px. Set --scroll-fade-size pour une valeur fixe.

Défaut

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

--scroll-fade-size: 80px

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

tsx

<div className="scroll-fade overflow-y-auto" style={{ "--scroll-fade-size": "80px" } as any}>…</div>

Disabling the Fade

scroll-fade-none supprime le fade. Utile en variante responsive : scroll-fade md:scroll-fade-none.

tsx

<div className="scroll-fade md:scroll-fade-none overflow-y-auto">…</div>

Fallback

Le comportement scroll-aware repose sur les CSS scroll-driven animations — supporté nativement dans Chrome 115+, Edge 115+. Dans les navigateurs sans support (Safari, Firefox actuel), scroll-fade retombe sur un fade statique sur les deux bords ; les edge utilities sur un fade statique du seul bord ciblé.

RTL

scroll-fade-x suit la direction de lecture. En RTL le bord droit est net au repos et la fade est à gauche — mirror du LTR — sans classe supplémentaire.

Chip 1Chip 2Chip 3Chip 4Chip 5Chip 6Chip 7Chip 8Chip 9Chip 10Chip 11Chip 12Chip 13Chip 14Chip 15Chip 16Chip 17Chip 18Chip 19Chip 20Chip 21Chip 22Chip 23Chip 24

On This Page