# ScrollFade

El borde inferior de una caja con desplazamiento se desvanece en el papel, como una hoja que continúa. Señala más contenido; al final, desaparece.

## Playground

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

## Cuándo usarlo

-   Al final de cada área que hace scroll y puede ocultar contenido: la pantalla, el cuerpo de un Drawer, una lista de altura fija.

## Cuándo no usarlo

-   **En una caja que nunca hace scroll.**
-   **Sobre una acción** al final de la caja: la acción va en un pie de página fuera del desplazamiento.

## Ejemplos

### En una caja con desplazamiento

Haga scroll dentro de la caja. La caja con desplazamiento no tiene relleno; el relleno va en el contenido que está dentro.

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

## Hacer y no hacer

Do

El desvanecimiento en el color de fondo de la caja.

Parece como la hoja continuando.

Don’t

Una sombra borrosa abajo, o una flecha parpadeante.

Las sombras borrosas no son Feitio, y una flecha parpadeante es ruido.

## Accesibilidad

-   Es solo visual (`aria-hidden="true"`).

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-scroll-fade"`

último hijo

El desvanecimiento anclado al borde inferior.

`--feitio-scroll-fade-to`

un color Feitio

El color de fondo, cuando no es `surface`.

`--feitio-scroll-fade-bleed`

un relleno

Sobrepone el relleno de un bloque, de borde a borde.