Índice

1. Introducción
2. La propiedad scroll-behavior en CSS
3. Sintaxis
4. Ejemplo
5. Soporte en navegadores
6. Referencias
7. Conclusiones

1. Introducción

Muchas personas piensan que solo podemos generar transiciones con propiedades concretas de CSS como por ejemplo transition, transform o animation con keyframes pero para features específicas podemos usar otras características que nos ofrece CSS para llegar a resultados muy bien acabados y sencillos de aprender. implementar y mantener.

En este breve post explicaremos los conceptos básicos de la propiedad scroll-behavior, veremos su sintaxis, un ejemplo y su soporte en navegadores.

¡Comencemos! 😌

2. La propiedad scroll-behavior en CSS

La propiedad scroll-behavior de CSS nos sirve para generar una transición más suave cuando tenemos un scroll en nuestra página que se activa por una navegación, por ejemplo un índice de contenido.

Sabemos que podemos usar enlaces relativos un documento HTML que enlazan el atributo href de un enlace con el id de una etiqueta, esto para generar interactividad y una navegación interna de la página:

href="#page-1">Page 1


 id="page-1">
    Hola, soy la Page 1

Esto genera que cuando el usuario haga click sobre el enlace Page 1 la navegación lo direcciona al div con id="page-1" dentro de la misma página. Veremos este ejemplo más completo dentro de poco.

3. Sintaxis

La propiedad scroll-behavior recibe dos valores:

• auto: el scroll no tiene transición alguna.
• smooth: se genera una transición suave solo hacer scroll con la navegación, no sirve cuando el usuario hace scroll con un mouse o con su dedo en el caso de un dispositivo móvil.

☢️ Para que la propiedad funcione siempre se aplica al contenedor de la navegación

4. Ejemplo

En nuestro ejemplo mostramos 2 índices: uno aplicando smooth y otro no. Como podemos apreciar, cuando no aplicamos el efecto el scroll del índice es muy brusco, en cambio cuando sí lo hacemos generamos una transición más suave y agradable a la vista.

Este efecto lo conseguimos aplicando la propiedad scroll-behavior con su valor smooth al contendor de los links y también un overflow-y (eje vertical) para asegurarnos de que exista un scroll vertical y el efecto se aplique como se debe.
Las propiedades que hacen las magia son:

.smooth {
  width: 250px;
  height: 250px;
  margin: 0 auto;
  padding: 2rem;
  /*acá está la magia*/
  scroll-behavior: smooth;
  overflow-y: scroll;
}

5. Soporte en navegadores

A la fecha de publicación de este post esta característica de CSS cuenta con más de 96% de soporte en navegadores modernos por lo que su uso es más que recomendado y seguro.

6. Referencias

• https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

7. Conclusiones

Aprender sobre transiciones y animaciones con el scroll llevarán tus habilidades de CSS a otro nivel, existen muchas propiedades relacionadas con el scroll que no son muy conocidas por los desarrolladores y ante este desconocimiento hacemos uso de JavaScript para resolver estos problemas cuando con unas pocas líneas de CSS tenemos más que suficiente en muchas ocasiones.