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.

En esta página

Playground

Recordatorio 1: cada semana, 8h.

Recordatorio 2: cada semana, 9h.

Recordatorio 3: cada semana, 10h.

Recordatorio 4: cada semana, 11h.

Recordatorio 5: cada semana, 12h.

Recordatorio 6: cada semana, 13h.

Recordatorio 7: cada semana, 14h.

Recordatorio 8: cada semana, 15h.

Recordatorio 9: cada semana, 16h.

Recordatorio 10: cada semana, 17h.

Contenido

Fondo

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

Recordatorio 1: cada semana, 8h.

Recordatorio 2: cada semana, 9h.

Recordatorio 3: cada semana, 10h.

Recordatorio 4: cada semana, 11h.

Recordatorio 5: cada semana, 12h.

Recordatorio 6: cada semana, 13h.

Recordatorio 7: cada semana, 14h.

Recordatorio 8: cada semana, 15h.

Recordatorio 9: cada semana, 16h.

Recordatorio 10: cada semana, 17h.

Recordatorio 11: cada semana, 18h.

Recordatorio 12: cada semana, 19h.

Recordatorio 13: cada semana, 20h.

Recordatorio 14: cada semana, 21h.

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

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.

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.