# ScrollFade

Der untere Rand eines scrollbaren Rahmens fadet in das Papier ein, wie ein Blatt, das weitergeht. Es signalisiert mehr Inhalt; am Ende verschwindet es.

## Playground

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

## Wann verwenden

-   Am Ende jedes Bereichs, der scrollen und Inhalte verbergen kann: der Bildschirm, der Körper eines Drawers, eine feste Liste.

## Wann nicht verwenden

-   **In einem Rahmen, der nie scrollt.**
-   **Über einer Aktion** am Ende des Rahmens: die Aktion geht in einen Footer außerhalb des Scrollens.

## Beispiele

### In einer scrollbaren Box

Scrollen innerhalb des Rahmens. Der scrollbare Rahmen hat keine Padding; das Padding gehört zum Inhalt darin.

Code anzeigen

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

## Do and don't

Do

Das Faden im Hintergrundfarb des Rahmens.

Es sieht aus wie das Blatt, das weitergeht.

Don’t

Ein verschwommener Schatten unten oder ein blinkender Pfeil.

Verschwommene Schatten sind nicht Feitio, und ein blinkender Pfeil ist Rauschen.

## Barrierefreiheit

-   Es ist visuell nur (`aria-hidden="true"`).

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-scroll-fade"`

letztes Kind

Der Fade, der an den unteren Rand fixiert ist.

`--feitio-scroll-fade-to`

eine Feitio-Farbe

Hintergrundfarbe, wenn es nicht `surface` ist.

`--feitio-scroll-fade-bleed`

ein Padding

Liegt über das Padding eines Blocks, von Kante zu Kante.