La navegación de una página web puede mejorar o destrozar la experiencia de usuario. En KeepCoding creemos que es importante que, a la hora de diseñar nuestros sitios web, pensemos no solo en cómo se ven nuestros elementos, sino también en cómo se experimenta el desplazamiento entre ellos. Por ello, en este post, te explicamos qué es el scroll-behavior en CSS o simplemente scrollbehavior y cómo utilizarlo para crear un desplazamiento más suave y agradable entre las secciones de tu página web.
¿Qué es scroll-behavior en CSS?
A la hora de crear un menú con el que nos desplazamos por una misma página, debemos tener en cuenta cómo se verá este desplazamiento. Si dejamos el menú básico, que solo contiene una lista de enlaces a cada sección, el desplazamiento puede verse tosco y rápido. Por ello, hay una tendencia a modificar el desplazamiento automático de las páginas web.
El resultado final es que la página se desplaza inicialmente rápido y luego más lento a medida que se acerca a la sección. Esto sucede en el margen de un segundo, pero antes de CSS necesitábamos horas para programarlo. Hace un tiempo solo lo sabíamos hacer con JavaScript, y debíamos hacerlo con un montón de líneas de código con cálculos de posición, restas y multiplicaciones de objetos que se ven y no se ven. Ahora, CSS nos ha echado una mano.
El comportamiento de desplazamiento o scroll-behavior en CSS es una propiedad que nos permite hacer saltos en la página usando un desplazamiento menos brusco y más agradable, todo con una sola línea de código.
¿Cómo aplicar scroll-behavior en CSS?
La propiedad scroll-behavior en CSS tiene dos opciones: auto ( scroll automatico css ) y smooth. El desplazamiento auto sucede inmediatamente, saltando de una sección a otra sin ningún movimiento entre las dos. No solemos usar esta determinación, ya que, como su nombre indica, el navegador usará esta opción de manera automática.
La opción smooth scroll representa la opción de crear un desplazamiento suave y agradable como el que hemos descirto anteriormente. Ten en cuenta que esta propiedad solo va a funcionar si se aplica a desplazamientos provocados por la navegación o las APIs del DOM. Esto quiere decir que, si la navegación no es un evento del DOM, del propio HTML, el desplazamiento no funcionará. Además, cuando esta propiedad está especificada en el elemento raíz, se aplica al viewport. Es decir, el estilo se aplicará al elemento contenedor donde ocurre el desplazamiento. En la mayoría de casos, este elemento es el body, que está contenido en el viewport. Esto se escribe como <:root {scroll-behavior: smooth}>.
Si quieres que esta opción siempre se aplique en tu página web, te recomendamos escribirla en tu archivo reset.css, un archivo muy útil para determinar estilos globales y propiedades de visualización. Un archivo reset es un documento CSS aparte en el que escribirás todas las propiedades generales de tu página web, como lo son el font-family, box-sizing, ancho máximo de imágenes, bordes y padding. Este archivo lo puede insertar en todas tus páginas web para no tener que volver a escribir propiedades que siempre usas y quieres aplicar.
Y así, insertando una sola propiedad, obtenemos una navegación más agradable y una mejor experiencia de usuario.
¿Cuál es el siguiente paso?
Ahora que sabes cómo funciona la propiedad scroll-behavior en CSS y cómo utilizarla para crear una experiencia de navegación más agradable, ¡ha llegado el momento de que la pongas en práctica en tu propia página web! Como sabemos que te interesa el desarrollo web, te recomendamos nuestro bootcamp Desarrollo Web Full Stack Bootcamp para que sigas aprendiendo sobre este ámbito del sector IT hasta convertirte en un experto.
En este bootcamp, podrás aprender mucho más sobre desarrollo web en un contexto practico-teórico intensivo. Al final, usarás los conocimientos que aprendiste para crear y diseñar tu propia página web con ayuda de nuestros profesores. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web? ¡Anímate a matricularte!
