Scroll-snap-stop - Trucos CSS

Anonim

scroll-snap-stopes 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-stopes una propiedad opcional 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-stople permite forzar el contenedor de ajuste de desplazamiento para que se ajuste a un elemento en particular. Suponga que se desplaza dentro de un contenedor que se rompe y le da un giro gigante del mouse. Normalmente, el navegador dejaría que la velocidad de su desplazamiento vuele más allá de los puntos de ajuste hasta que se establezca en un punto de ajuste cerca de donde normalmente terminaría el desplazamiento. Al configurarlo scroll-snap-stop, puede decirle al navegador que debe detenerse en un elemento en particular antes de permitir que el usuario lo pase.

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

Sintaxis

scroll-snap-stop: normal | always;

Valores

scroll-snap-stop acepta los siguientes valores:

  • normal es el valor predeterminado y permite que un elemento se desplace más allá sin romper
  • always forzará al navegador a ajustarse a este elemento, incluso si el desplazamiento normalmente pasaría por este elemento

Ejemplo

Vea el ejemplo de Pen scroll-snap-stop
de 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

Tenga en cuenta que es posible que Chrome no sea compatible scroll-snap-stop: always;en este momento.

Relacionado

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Recursos

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