Scroll-snap-type - Trucos CSS

Anonim

La scroll-snap-typepropiedad es 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 ello 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.

Esto es útil si desea detener el navegador en puntos específicos de la página. Por ejemplo: un usuario que navega por una galería de fotos probablemente no quiera desplazarse hasta la mitad de una imagen; probablemente preferiría que la imagen se “ajustara” a la posición correcta mientras se desplaza. El ajuste de desplazamiento ofrece a los desarrolladores una forma de CSS puro para manejar este comportamiento.

scroll-snap-typees una propiedad obligatoria en cualquier contenedor desplazable al que desee agregar ajuste de desplazamiento. Responde a tres preguntas para un contenedor de desplazamiento:

  1. ¿El contenedor utiliza ajuste de desplazamiento?
  2. ¿En qué eje, x (horizontal), y (vertical), bloque o en línea, se debe aplicar el ajuste de desplazamiento?
  3. ¿Cómo debería comportarse el ajuste de desplazamiento? ¿Es forzado el 100% de las veces, o surte efecto solo cuando el usuario se acerca "lo suficientemente" a una posición de ajuste? Más sobre esto más adelante.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Sintaxis

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Valores

scroll-snap-type acepta los siguientes valores:

  • none desactiva el ajuste de desplazamiento.
  • x habilita el ajuste de desplazamiento a lo largo del eje x solamente.
  • y habilita el ajuste de desplazamiento solo a lo largo del eje y.
  • block habilita el ajuste de desplazamiento a lo largo del eje del bloque solamente.
  • inline habilita el ajuste de desplazamiento a lo largo del eje en línea solamente.
  • bothhabilita el ajuste de desplazamiento a lo largo de ambos ejes (que puede considerar como xy y, o inliney block.
  • mandatory es un valor de rigor que le dice al navegador que siempre vaya a una posición de ajuste cuando no se esté produciendo un desplazamiento.
  • proximityes un valor de rigor que le dice al navegador que vaya a una posición de ajuste si una acción de desplazamiento se acerca bastante a una posición de ajuste. Si no está muy cerca, entonces el navegador no debería romperse y el desplazamiento se comportará normalmente.

Ejemplo

Vea el ejemplo de Pen scroll-snap-type
por CSS-Tricks (@ css-tricks) en CodePen.

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-padding
  • scroll-margin
  • scroll-snap-align
  • 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