Controla el desplazamiento de tu web con CSS Scroll Snap

El scroll o desplazamiento, ya sea vertical u horizontal, es la forma más común que tenemos para explorar una web. Es lo que nos permite poder ver todo aquello que no aparece en el frame actual de la pantalla. Pero con el Scroll Snap podemos controlar el funcionamiento de este desplazamiento. Y solo con añadir unas pocas líneas de CSS.

Pero, ¿qué nos ofrece el Scroll Snap?. El Scroll Snap nos va a permitir que, al hacer scroll, ya sea con el ratón desde un ordenador o portátil, o desde la pantalla de un smartphone, este desplazamiento se detenga en un punto en concreto de nuestra web, normalmente el comienzo de una nueva sección. Esto es muy conveniente en sitios web que tengan una disposición en diferentes bloques horizontales, y queremos que nuestros usuarios salten de uno a otro de la forma más directa posible. Un buen ejemplo lo tenemos en la página de Tesla. Si navegamos por ella, vemos como saltamos directamente de una imagen a otra de forma directa.

Anteriormente, este tipo de comportamiento se podían realizar con Javascript. Pero gracias a los grandes avances que tenido CSS durante los últimos años, podemos hacerlo de forma muy sencilla con este lenguaje de programación. Pero, como suele pasar con las novedades en CSS, antes que nada vamos a comprobar el grado de compatibilidad que tiene con los navegadores actuales. Para ver si es conveniente usarlos en proyectos reales.

No nos olvidemos que, si es la primera vez que te enfrentas a CSS, es recomendable echar un vistazo a nuestra guía de iniciación al CSS, con la que podrás empezar a familiarizarte con este lenguaje.

Compatibilidad de Scroll Snap con los navegadores web

Como siempre, nos iremos a Can I Use… para comprobar que navegadores soportan Scroll Snap. Si los buscamos, obtenemos esto:

Como podemos ver, está bastante extendido, con excepción del soporte parcial de Internet Explorer, y la incompatibilidad los navegadores para móviles de Opera. En general, tenemos asegurados el buen funcionamiento casi en el 94% de los usuarios. A menos que sepamos que nuestro potenciales visitantes vengan en su gran mayoría de IE y Opera para móviles, podemos incorporar esta funcionalidad sin problemas.

Construyendo nuestro diseño con Scroll Snap

Hemos creado nuestro HTML de forma muy sencilla, con un div padre que alberga dentro cinco secciones, cada una de ellas con un heading y un párrafo, para tener algo de contenido. Lo que queremos es que, al hacer scroll, nos desplacemos de forma automática hasta el principio de cada una de estas secciones. Este funciona en ambas direcciones, es decir, si hacemos scroll hacia abajo iremos a la sección siguiente, y si lo hacemos hacia arriba, a la anterior.

Es un código HTML muy sencillo, pero que nos va a servir perfectamente. Lo que tenemos que tener en cuenta es el CSS que le daremos tanto al div padre como a sus hijos. Empezaremos viendo el CSS que le daremos al div padre:

.snap-container {
    height: 100vh;
    overflow: auto;  
    scroll-snap-type: y mandatory;  
  }

La propiedad importante de este trozo de código es scroll-snap-type. Con el valor y estamos diciendo que el scroll que estamos marcando es el vertical. Y con el valor mandatory, que la pagina se mueva hasta el principio de la sección siguiente o anterior, según hagamos scroll hacia abajo o hacia arriba. En vez de el valor mandatory podemos usar proximity, que har;a que no nos desplacemos hasta la sección siguiente o anterior hasta que no estemos muy próximos al principio de dicha sección.

Ahora pasamos a cada una de las secciones. Este es el CSS que vamos a utilizar:

.snap-section {
    scroll-snap-align: start;
    min-height: 60vh;
  }

Con scroll-snap-align designaremos en que punto que el desplazamiento se pare. En nuestro caso, le hemos dado el valor start, por lo que se parará justo al inicio de la sección. Aunque también podemos usar los valores center para quedarnos a mitad de la sección, o end para quedarnos al final. La altura de la sección la hemos marcado en vh o altura del viewport.

Con estas pocas lineas, ya tenemos el Scroll Snap en nuestra web, con un resultado parecido a este:

O podéis verlo directamente en Codepen:

A continuación, vamos a ver algunas variables que podemos introducir en Scroll Snap, como es el desplazamiento horizontal o el ajuste de margins y paddings.

Desplazamiento horizontal con Scroll Snap

Hasta ahora hemos visto el funcionamiento en scroll vertical, pero también podemos hacerlo en horizontal. Esto nos puede venir si la exploración de nuestra web se hace en esta dirección, o si queremos hacer un slider. Para conseguirlo, solo hay que cambiar un valor en el contenedor padre:

.snap-container {     
    scroll-snap-type: y proximity;  
  }

Exacto, cambiando el valor y por x, cambiamos el eje de desplazamiento. El resto de propiedades y valores seguirán siendo las mismas que las descritas antes.

Controlando los márgenes de nuestras secciones

Asignar un margin o padding a cada una de las secciones, aunque a primera vista pueda parecer algo no muy útil, puede ser muy necesario en ciertos escenarios. Por ejemplo, es muy habitual tener webs en las que existe un header con un navbar que se mantiene siempre fijo en la parte superior del navegador. Si usamos directamente el Scroll Snap, parte de nuestras secciones van a quedar debajo de este header, y no se van a ver.

Para solucionar esto, usaremos la propiedad scroll-padding-top o scroll-margin-top en nuestras secciones. El valor que le daremos será la altura que tenga nuestro header. Con esto conseguimos que la sección tenga el suficiente espacio superior como para que no quede por detrás del header.

Con el Scroll Snap puede darle una navegación muy característica a nuestra web, controlar como se mueven dentro de ella y dotar a cada una de sus secciones de un espacio propio. Ideal si queremos que nuestros visitantes centren su atención en cierto punto, ya sea un texto o una imagen. Y todo con unas pocas líneas de CSS.

Esperemos que os haya servido de ayuda este pequeño tutorial, y que hagáis uso del Scroll Snap en el futuro. Como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras dudas, experiencias y sugerencias!