jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador CSS scroll-snap

Genera reglas CSS scroll-snap para carruseles, galerias y desplazamiento horizontal.

Cargando herramienta...

Qué es Generador CSS scroll-snap?

CSS scroll-snap controla la posición de desplazamiento de un contenedor para que se ajuste a puntos de alineación que usted define. Permite crear carruseles, galerías horizontales y desplazamiento sección por sección sin JavaScript. El navegador maneja la física del ajuste, haciendo que sea suave en trackpad, rueda del ratón y dispositivos táctiles.

Respuesta rápida

Genere reglas CSS scroll-snap para carruseles, galerías y diseños basados en secciones. Elija dirección, tipo de ajuste y alineación para controlar cómo la posición de desplazamiento se ajusta a cada elemento hijo.

Last updated: 2026-06-11

Limitaciones

  • El tipo de ajuste mandatory puede impedir el desplazamiento rápido a través de contenido largo porque la posición de desplazamiento se ajusta a cada hijo, haciendo que la navegación rápida se sienta rígida.
  • Scroll-snap requiere que el contenedor tenga overflow establecido en scroll o auto. Los contenedores con overflow: hidden no activarán el comportamiento scroll-snap.
  • El ajuste de desplazamiento puede entrar en conflicto con las preferencias de usuario prefers-reduced-motion. Los usuarios que han solicitado movimiento reducido pueden encontrar desorientadores los puntos de ajuste forzados. Envuelva el comportamiento de ajuste en un bloque @media (prefers-reduced-motion: no-preference) para respetar la configuración de accesibilidad.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Seleccione la dirección de desplazamiento: horizontal para carruseles y galerías, vertical para páginas sección por sección.
  2. Elija el tipo de ajuste: mandatory siempre ajusta al punto más cercano, proximity ajusta solo cuando el desplazamiento está cerca de un punto de ajuste.
  3. Seleccione la alineación: start alinea el hijo al inicio del contenedor, center lo centra, end lo alinea al final.
  4. Copie el CSS generado y el esqueleto HTML, luego reemplace el contenido hijo de marcador de posición con el suyo propio.

Para qué puedes usarla

  • Construir una galería de imágenes horizontal que se ajuste a cada imagen al desplazarse o deslizar.
  • Crear un sitio de aterrizaje de página completa donde cada sección se ajuste a la vista al desplazarse.
  • Reemplazar un carrusel JavaScript con un componente CSS ligero de solo scroll-snap.

Casos de uso

Ejemplos prácticos

Ejemplo

Galería de portafolio de fotografía

Un fotógrafo configura un contenedor de desplazamiento horizontal con snap-type mandatory y snap-align center. Cada imagen llena la mayor parte del viewport, y el desplazamiento se detiene centrado en cada foto.

Ejemplo

Secciones de página de aterrizaje

Una página de aterrizaje de producto usa scroll-snap vertical con snap-type proximity. Cada sección de viewport completo se ajusta suavemente en su lugar, pero el usuario aún puede desplazarse libremente más allá de las secciones sin luchar contra el ajuste.

Errores comunes

  • Usar snap-type mandatory en un contenedor con contenido muy largo, lo que obliga al usuario a ajustarse a cada hijo y hace que la navegación se sienta rígida.
  • Olvidar establecer overflow en scroll o auto en el contenedor, lo que impide que scroll-snap se active.
  • No probar scroll-snap en un dispositivo táctil, donde el comportamiento de ajuste puede sentirse diferente que en un ratón o trackpad.

Verificación

  1. Pruebe el contenedor scroll-snap en un dispositivo táctil para confirmar que el ajuste se sienta suave y predecible a diferentes velocidades de desplazamiento.
  2. Verifique que todo el contenido hijo sea accesible mediante desplazamiento y que la alineación de ajuste no corte contenido importante en los bordes del contenedor.

FAQ

Preguntas sobre Generador CSS scroll-snap

¿Funciona scroll-snap en dispositivos móviles?

Sí. Scroll-snap funciona en todos los navegadores modernos incluyendo Safari móvil y Chrome. Los gestos táctiles, deslizamientos con trackpad y desplazamiento con rueda del ratón activan el comportamiento de ajuste.

¿Cuál es la diferencia entre mandatory y proximity?

Mandatory siempre ajusta al punto de ajuste más cercano, incluso si el usuario se desplaza ligeramente. Proximity solo ajusta cuando la posición de desplazamiento está cerca de un punto de ajuste, dando al usuario más libertad para navegar sin ajuste forzado.

¿Cómo agrego scroll-snap-stop?

Agregue scroll-snap-stop: always en los elementos hijo para forzar que el desplazamiento se detenga en cada punto de ajuste. Esto evita que el usuario pase múltiples elementos en un solo gesto. El valor predeterminado es normal, que permite al navegador saltar puntos de ajuste durante el desplazamiento rápido.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también