Controla el desplazamiento de tu web con CSS Scroll Snap

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:

compatibilidad de CSS scroll snap con navegadores web

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.

codigo html para scroll snap

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:

scroll snap en funcionamiento en web

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!

Easy Digital Downloads 3.0 beta en pública

Easy Digital Downloads (EDD) se está acercando a un hito importante con la versión 3.0 en desarrollo activo, una gran empresa Read more

Cómo poner Stories en WordPress con el nuevo plugin de Google

¿Quieres crear Google Web Stories en WordPress? Si es así, le alegrará saber que es completamente posible hacerlo en WordPress. A partir Read more

WordPress potencia el 40% de todos los sitios web, el Nuevo Sistema Operativo de Internet.

WordPress hoy día se consolida como el Sistema Operativo de Internet, puesto que se ejecuta en más de 75 Millones Read more

Chrome prueba un botón para seguir sitios web

Google Chrome está probando Chrome Canary , la compilación nocturna del navegador para desarrolladores, ha estado probando un nuevo botón Seguir, Read more

WordPress 5.7 facilitará la migración de HTTP a HTTPS

La próxima gran versión de WordPress hará que sea mucho más fácil para los usuarios migrar sus sitios de HTTP Read more

Kinsta lanza la herramienta de desarrollo de WordPress local gratuita

Kinsta, una empresa de alojamiento administrado de WordPress, anunció hoy su herramienta de desarrollo local llamada DevKinsta . La herramienta permite a los Read more

Newsletter SomosWPObtén un resumen Semanal de lo Último de WordPress

Ingresa tu Correo Electrónico