# ScrollFade

A borda de baixo de uma caixa que rola some no papel, como uma folha que continua. Avisa que há mais conteúdo; no fim, some.

## Playground

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

## Quando usar

-   No fim de toda área que rola e pode esconder conteúdo: a tela, o corpo de um Drawer, uma lista de altura fixa.

## Quando não usar

-   **Numa caixa que nunca rola.**
-   **Por cima de uma ação** no fim da caixa: a ação vai para um rodapé fora da rolagem.

## Exemplos

### Numa caixa que rola

Role dentro da caixa. A caixa que rola não leva recuo; o recuo fica no conteúdo dentro dela.

Mostrar código

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

## Bons e maus padrões

Faça assim

O esmaecido na cor do fundo da caixa.

Parece a folha continuando.

Não faça

Uma sombra borrada embaixo, ou uma seta piscando.

Sombra esfumada não é do Feitio, e seta piscando é barulho.

## Acessibilidade

-   É só visual (`aria-hidden="true"`).

## Atributos

Atributo

Valores

Para quê

`class="feitio-scroll-fade"`

último filho

O esmaecido preso na borda de baixo.

`--feitio-scroll-fade-to`

uma cor do Feitio

A cor do fundo, quando não é `surface`.

`--feitio-scroll-fade-bleed`

um recuo

Passa por cima do recuo de um bloco e vai de borda a borda.