scroll-snap-type y scroll-snap-align
Cree experiencias de desplazamiento para carruseles y paginación mediante las propiedades CSS de scroll snap.
scroll-snap-type y scroll-snap-align es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué es CSS Scroll Snap?
CSS Scroll Snap permite que los contenedores desplazables «encajen» en posiciones específicas después del desplazamiento, creando comportamientos controlados de paginación y carrusel sin JavaScript.
scroll-snap-type en el contenedor
Active el ajuste en el contenedor desplazable:
<div class="carousel">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>Valores de scroll-snap-type
Consta de dos partes:
- Eje:
x,yoboth - Grado de rigidez:
mandatory(siempre encaja) oproximity(encaja cuando está cerca de un punto de ajuste)
<div class="paged">Paged container</div>
<div class="freeform">Freeform container</div>scroll-snap-align en los elementos
Defina dónde encaja cada elemento secundario dentro del contenedor:
<div class="carousel-demo">
<div class="carousel-item">1</div><div class="carousel-item">2</div>
</div>Ajuste de páginas a pantalla completa
Un diseño de secciones verticales a pantalla completa con paginación:
<div class="sections">
<div class="section">Section 1</div><div class="section">Section 2</div>
</div>Ajuste de carrusel horizontal
Un carrusel horizontal de tarjetas con ajuste:
<div class="carousel">
<div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div>
</div>scroll-snap-stop
scroll-snap-stop: always evita que el desplazamiento rápido omita puntos de ajuste. El usuario no puede avanzar más de un elemento por gesto de desplazamiento.
<div class="slider">
<div class="slide">1</div><div class="slide">2</div>
</div>scroll-snap-margin y scroll-padding
Ajuste la posición de encaje en los elementos (scroll-margin) o en el contenedor (scroll-padding):
<div class="carousel">Carousel container</div>overscroll-behavior
overscroll-behavior: contain evita el encadenamiento del desplazamiento: cuando el contenedor alcanza su límite, la página tampoco se desplaza:
<div class="modal-body">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>Consideraciones de accesibilidad
Los carruseles con ajuste también deben poder usarse con el teclado. Las teclas de flecha deben permitir moverse entre los puntos de ajuste. Añada roles y etiquetas ARIA de carrusel. El desplazamiento programático mediante JavaScript debe respetar los mismos puntos de ajuste.
Carruseles CSS frente a carruseles JS
CSS scroll snap cubre la mayoría de las necesidades básicas de un carrusel sin JavaScript: ajuste a puntos, ocultación de la barra de desplazamiento y alineación mediante relleno. Use una biblioteca JS cuando necesite indicadores de puntos, botones anterior/siguiente con transiciones animadas o una gestión compleja de la accesibilidad.
Comprobación rápida
¿Qué valor de scroll-snap-type garantiza que el contenedor siempre se detenga exactamente en un punto de ajuste y nunca entre dos puntos?
Resumen
CSS Scroll Snap crea comportamientos de paginación y carrusel. Establezca scroll-snap-type: x mandatory en el contenedor y scroll-snap-align: start en los elementos. Use scroll-snap-stop: always para evitar que se omitan puntos. Combínelo con overscroll-behavior: contain para evitar el encadenamiento del desplazamiento. Oculte las barras de desplazamiento con scrollbar-width: none para obtener una apariencia limpia.
Preguntas frecuentes
¿La lección «scroll-snap-type y scroll-snap-align» es gratis?
Sí — el texto completo de «scroll-snap-type y scroll-snap-align» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «scroll-snap-type y scroll-snap-align»?
Cree experiencias de desplazamiento para carruseles y paginación mediante las propiedades CSS de scroll snap. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «scroll-snap-type y scroll-snap-align»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- overflow: hidden, scroll, auto y clip
- scroll-behavior: smooth
- scroll-snap-type y scroll-snap-align
- Estilos de la barra de desplazamiento con ::-webkit-scrollbar