Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=eb0e7d7e-0454-4d57-ade3-5984f95f718e

VIDEO: Scroll con pausas y saltos usando tan solo CSS

El efecto de "scroll" nació como una forma de hacer que algo grande cupiese dentro de otra cosa que es más pequeña. Hoy en día lo tenemos tan interiorizado que apenas le hacemos caso, pero en su momento fue toda una revolución. En el caso concreto de la Web, por regla general, el viewport del navegador suele ser de menor tamaño que el contenido de las páginas, y para poder verlas enteras nos desplazamos para ir viendo las partes que están ocultas. Entrando en cualquier página web lo vemos en acción:

Efecto de hacer scroll

En condiciones normales esto es lo que queremos. Pero otras veces necesitamos que el scroll no se haga de cualquier manera, sino que vaya a saltos, pasando por, y deteniéndose en, ciertos puntos concretos.

Por ejemplo, en el típico carrusel de imágenes o en el slider de la página principal de un sitio, es recomendable que las fotos/mensajes se vean siempre enteras y no por trozos:

En la figura se ven unas cajas haciendo scroll hortizontal de modo que siempre quedan centradas

Es decir, se trata de poner algo parecido a "imanes" o puntos de salto para que el scroll no sea continuo, sino que vaya directo a los puntos que nos interesa.

Tradicionalmente esto se conseguía mediante el uso de JavaScript, y tampoco era especialmente fácil salvo que utilizásemos algún tipo de plugin o librería específica para lograrlo.

Bien, pues el soporte para controlar el efecto de scroll ha llegado también a HTML5 a través de la nueva especificación CSS Scroll Snap Module.

Está ya soportada por todos los navegadores modernos. Como siempre, la excepción es Internet Explorer. Lo bueno es que, aunque un navegador no la soporte, se comportará de la manera convencional, por lo que tampoco supone ningún problema.

Todo ello se fundamenta en el uso de 2 propiedades, complementadas por otras 2 en caso de necesitar ajustes adicionales respecto a los bordes.

Vamos a ver cómo funciona en el siguiente vídeo, perteneciente a nuestro curso de HTML y CSS, y puedes descargar el ejemplo desde aquí.

Referencias en la MDN

José Manuel Alarcón Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José Manuel Alarcón
Archivado en: Desarrollo Web

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.