Atributo scroll-snap-type de CSS

Definición y uso

scroll-snap-type La propiedad especifica cómo y en qué dirección el elemento se adherirá al punto de foco cuando deje de desplazarse.

Para implementar el comportamiento de adherencia de desplazamiento, debe configurar en el elemento padre. scroll-snap-type Atributo, y configure en el elemento hijo scroll-snap-align Atributo.

Ejemplo

Ejemplo 1

Establezca la función de adherencia de desplazamiento en el eje x:

#container {
  scroll-snap-type: x mandatory;
}

Pruebe usted mismo

Ejemplo 2: Establezca el comportamiento de adherencia en el eje x e y

Establezca tanto en el eje x como en el eje y. scroll-snap-type Atributo:

#container > div {
  scroll-snap-type: both mandatory;
}





Pruebe usted mismo

Ejemplo 3: Comportamiento de adherencia con proximidad

Establezca el efecto de adherencia de desplazamiento con comportamiento de proximidad en el eje x e y. scroll-snap-type Atributo. Al usar este valor de atributo, si la operación de desplazamiento se detiene exactamente en el medio entre dos elementos, no se realizará la adherencia:

#container > div {
  scroll-snap-type: both proximity;
}





Pruebe usted mismo

Sintaxis de CSS

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

Valor del atributo

Valor Descripción
none Sin efecto de adherencia de desplazamiento. Valor predeterminado.
x Establezca el efecto de adherencia de desplazamiento en el eje x.
y Establezca el efecto de adherencia de desplazamiento en el eje y.
block Establezca el efecto de adherencia de desplazamiento en la dirección de bloque.
inline Establezca el efecto de adherencia de desplazamiento en la dirección en línea.
both Establezca el efecto de adherencia de desplazamiento en el eje x e y.
mandatory Después de que se complete la operación de desplazamiento, el desplazamiento se moverá automáticamente al punto de adherencia.
proximity

Similares a mandatory, pero no tan estrictas.

Después de que se complete la operación de desplazamiento, el desplazamiento se moverá automáticamente al punto de adherencia, pero hay un área entre los puntos de adherencia sin efecto de adherencia.

Depende de los parámetros del navegador.
initial Establezca este atributo en su valor predeterminado. Consulte initial.
inherit Hereda este atributo de su elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado: none
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.scrollSnapType="x mandatory"

Compatibilidad del navegador

El número en la tabla representa la versión del navegador que admite completamente la propiedad por primera vez.

Chrome Edge Firefox Safari Opera
69.0 79.0 99.0 11.0 56.0

Páginas relacionadas

Referencia:Atributo scroll-snap-align de CSS