Scroll-snap-align - Trucos CSS

Anonim

scroll-snap-alignes parte del módulo CSS Scroll Snap. El ajuste de desplazamiento se refiere a "bloquear" la posición de la ventana gráfica en elementos específicos de la página a medida que se desplaza la ventana (o un contenedor desplazable). Piense en un contenedor de desplazamiento de desplazamiento como poner un imán encima de un elemento que se adhiere a la parte superior de la ventana gráfica y obliga a la página a dejar de desplazarse allí mismo.

scroll-snap-alignes una propiedad necesaria para un elemento de ajuste de desplazamiento dentro de un contenedor de ajuste de desplazamiento. Para obtener más información sobre contenedores de desplazamiento, consulte la scroll-snap-typeentrada del almanaque. scroll-snap-alignindica al navegador qué parte de un elemento debe estar alineada cuando se encuentra un punto de captura: En caso el elemento de ajuste a la start, centero enddel contenedor primario que contiene la scroll-snap-typepropiedad?

Si desea que un elemento encaje en su lugar al comienzo de ese elemento, asígnele un scroll-snap-alignvalor como este:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Sintaxis

scroll-snap-align: ( none | start | end | center )(1,2)

Puede especificar hasta 2 valores para esta propiedad, que representan el bloque y los ejes en línea, respectivamente. Si solo da 1 valor, ese valor se usará para ambos ejes.

Valores

scroll-snap-align acepta los siguientes valores:

  • none deshabilita el ajuste de desplazamiento en el elemento
  • start alinea el inicio del elemento con el snapport del contenedor de desplazamiento cuando se coloca en su lugar
  • end alinea el extremo del elemento con el snapport del contenedor de desplazamiento cuando se coloca en su lugar
  • center alinea el centro del elemento con el snapport del contenedor de desplazamiento cuando se encaja en su lugar

Ejemplo

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
69 68 11 * 79 11

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 81 11.0-11.2

Relacionado

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Recursos

  • Recomendación de candidato de CSS Scroll Snap W3C
  • Ajuste de desplazamiento de CSS práctico
  • Presentamos CSS Scroll Snap Points