# ScrollFade

Le bord inférieur d'une boîte à défilement s'estompe dans le papier, comme une feuille qui continue. Il signale plus de contenu ; à la fin, il disparaît.

## Playground

```html
<div class="scroll-demo" id="pg-scroll" tabindex="0"><div class="scroll-demo-content"><p>Rappel 1: chaque semaine, 8h.</p><p>Rappel 2: chaque semaine, 9h.</p><p>Rappel 3: chaque semaine, 10h.</p><p>Rappel 4: chaque semaine, 11h.</p><p>Rappel 5: chaque semaine, 12h.</p><p>Rappel 6: chaque semaine, 13h.</p><p>Rappel 7: chaque semaine, 14h.</p><p>Rappel 8: chaque semaine, 15h.</p><p>Rappel 9: chaque semaine, 16h.</p><p>Rappel 10: chaque semaine, 17h.</p></div><span class="feitio-scroll-fade" aria-hidden="true"></span></div>
```

## Quand l'utiliser

-   À la fin de toute zone capable de défilement et pouvant cacher du contenu : l'écran, le corps d'un Drawer, une liste de hauteur fixe.

## Quand ne pas l'utiliser

-   **Dans une boîte qui ne défile jamais.**
-   **Sur un action** à la fin de la boîte : l'action va dans un footer en dehors du défilement.

## Exemples

### Dans une boîte défilante

Défilez à l'intérieur de la boîte. La boîte à défilement n'a pas de marge ; la marge est sur le contenu qui se trouve à l'intérieur.

Afficher le code

```html
<div class="caixa-que-rola">                                   <!-- sem recuo -->
  <div class="conteudo">…</div>                                 <!-- o recuo fica aqui -->
  <span class="feitio-scroll-fade" aria-hidden="true"></span>   <!-- sempre o último -->
</div>
```

## Faire et ne pas faire

Do

L'estompe dans la couleur de fond de la boîte.

Cela ressemble à la feuille qui continue.

Don’t

Une ombre floue en bas, ou une flèche clignotante.

Les ombres flues ne sont pas Feitio, et une flèche clignotante est du bruit.

## Accessibilité

-   C'est uniquement visuel (`aria-hidden="true"`).

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-scroll-fade"`

dernier enfant

L'effet de fondu fixé au bord inférieur.

`--feitio-scroll-fade-to`

une couleur Feitio

La couleur de fond, lorsqu'elle n'est pas `surface`.

`--feitio-scroll-fade-bleed`

un espacement

Cela s'étend sur l'espacement d'un bloc, bord à bord.