Atributo scroll-snap-align de CSS

Definición y uso

scroll-snap-align La propiedad especifica que cuando deje de desplazarse, el elemento se adherirá a la posición del punto de foco.

Para implementar el comportamiento de sujeción de desplazamiento, debe configurar la propiedad en los elementos hijos scroll-snap-align propiedad, y configure en el elemento padre scroll-snap-type Atributo.}

Ejemplo

Ejemplo 1

Cuando el usuario detiene el desplazamiento, haga que el elemento más cercano se adhiera a la posición central:

div {
  scroll-snap-align: center;
}

Intente hacerlo usted mismo

Ejemplo 2: Biblioteca de imágenes

scroll-snap-align Este atributo es muy adecuado para usar en la navegación de bibliotecas de imágenes. Aquí, la dirección de desplazamiento es horizontal y el modo de alineación de adhesión es central. Cuando el usuario suelta la barra de desplazamiento, la imagen más cercana se adhiere al centro de la área desplazable. Pruebe a hacer clic en una imagen y luego usar las teclas de flecha izquierda y derecha para desplazarse entre ellas:

#container > img {
  scroll-snap-align: none center;
}
Pekín Bailarín Wuhan Tulipa Hangzhou

Intente hacerlo usted mismo

puente de pasillo en montañas de selva, hombre con cámara, Cinque Terre

Ejemplo 3: Alineación de posición de adhesión vertical en la dirección de bloque

Cuando se desplaza verticalmente,scroll-snap-align El atributo también se puede establecer en la posición de inicio del elemento en la dirección de bloque:

#container > div {
  scroll-snap-align: start none;
}

Intente hacerlo usted mismo

Sintaxis de CSS

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

Valor del atributo

Valor Descripción
none Sin efecto de adhesión de desplazamiento. Valor predeterminado.
start En el eje x y y, realice la adhesión de desplazamiento en el extremo inicial del elemento.
end En el eje x y y, realice la adhesión de desplazamiento en el extremo final del elemento.
center En el eje x y y, realice la adhesión de desplazamiento en el centro del elemento.
block inline Sintaxis de doble valor. El primer valor especifica el modo de adhesión en la dirección de bloque, y el segundo valor especifica el modo de adhesión en la dirección en línea.
initial Establezca esta propiedad en su valor predeterminado. Vea initial.
inherit Hereda esta propiedad de su elemento padre. Vea inherit.

Detalles técnicos

Valor predeterminado: none
Herencia: No
Producción de animación: No se admite. Consulte:Propiedades relacionadas con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.scrollSnapAlign="start"

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que completamente admite esta propiedad.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

Páginas relacionadas

Referencia:Atributo scroll-snap-type de CSS