La scroll-behaviorpropiedad en CSS nos permite definir si la ubicación de desplazamiento del navegador salta a una nueva ubicación o anima suavemente la transición cuando un usuario hace clic en un enlace que apunta a una posición anclada dentro de un cuadro de desplazamiento.
html ( scroll-behavior: smooth; )Explicación más profunda
Espera, espera, ¿qué es este cuadro de desplazamiento del que hablamos? Es un elemento con contenido que desborda sus límites.
Vea el cuadro de desplazamiento de lápiz por CSS-Tricks (@ css-tricks) en CodePen.
Observe cómo la caja de la demostración anterior tiene una altura fija de 200px? Cualquier contenido que exceda esa altura está fuera de los límites del cuadro y lo hemos agregado overflow-y: scrollpara que ese contenido adicional sea accesible con desplazamiento vertical. Eso es lo que queremos decir con un cuadro de desplazamiento.
Ahora digamos que agregamos una navegación en la parte superior del cuadro con cada enlace dirigido a las tres secciones de contenido:
Vea el Cuadro de desplazamiento de lápiz con Nav por CSS-Tricks (@ css-tricks) en CodePen.
Cada enlace lleva al usuario directamente a las diferentes secciones de contenido dentro del cuadro de desplazamiento. De forma predeterminada, esa transición entre ellos es un salto abrupto.
Ese tipo de salto puede ser discordante. Ahí es donde scroll-behaviorentra y nos permite establecer una transición de desplazamiento suave. Este tipo de cosas solían tomar Javascript sofisticado, pero scroll-behaviornos dará la capacidad de hacerlo de forma nativa en CSS, una vez que mejore el soporte del navegador.
Sintaxis
.module ( scroll-behavior: ( auto | smooth ); )Valores
La scroll-behaviorpropiedad acepta dos valores, que básicamente activan y desactivan la función de desplazamiento suave.
auto(predeterminado): este valor permite el salto brusco entre elementos dentro del cuadro de desplazamiento.smooth: Fiel a su nombre, este valor es la transición animada suave entre elementos dentro del cuadro de desplazamiento.
Manifestación
La siguiente demostración solo funcionará en Chrome 61+, Firefox 36+ y Opera 48+ en el momento de escribir este artículo.
Vea el cuadro de desplazamiento de la pluma con `scroll-behavior` de CSS-Tricks (@ css-tricks) en CodePen.
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 61 | 36 | No | 79 | No |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | No |
Más información
- Módulo de vista CSSOM: el borrador de la especificación, incluida la propiedad CSS. El borrador actual incluye una recomendación para mover el
scroll-behaviora otra especificación, por lo que será interesante ver dónde aterriza. - Mozilla Developer Network: la referencia MDN para la especificación
- Estado de la plataforma Microsoft Edge: actualmente muestra el estado de esta función como En consideración
- Estado de la plataforma Chrome: actualmente muestra el estado de esta función como En desarrollo e incluye estados para otras plataformas como un aparte
- Fragmento de desplazamiento suave: fragmentos para permitir un desplazamiento suave con Javascript y jQuery
- Desplazamiento suave y accesibilidad: una publicación de Trucos CSS sobre el impacto del desplazamiento suave habilitado para Javascript