Generador de diseños de desplazamiento con instantánea CSS Genera diseños de desplazamiento con instantánea CSS para desplazamientos horizontales y verticales con alineación de instantánea.

El Scroll Snap de CSS utiliza dos propiedades principales: scroll-snap-type en el contenedor y scroll-snap-align en los elementos. scroll-snap-type toma un eje (x, y o ambos) y un valor de rigidez (obligatorio o proximidad). Obligatorio fuerza la posición del desplazamiento a ajustarse a un punto de salto, mientras que proximidad solo se ajusta cuando está cerca de un punto de salto. scroll-snap-align en los elementos define dónde se ajusta el elemento: inicio se alinea con el inicio del contenedor, centro con el medio y fin con el final del contenedor. Las propiedades adicionales incluyen scroll-padding en el contenedor para posiciones de salto desplazadas y scroll-margin en los elementos para desplazamientos de salto individuales. Para que funcione el salto, el contenedor necesita overflow: auto o overflow: scroll y dimensiones definidas. El comportamiento del desplazamiento es suave y utiliza el desplazamiento nativo del navegador, lo que proporciona un excelente rendimiento. Los navegadores modernos admiten completamente el salto de desplazamiento sin prefijos de proveedor.