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:
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:
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
Fecha de publicación: