Definición de .scroll-behavior aplicado en CSS
La propiedad .scroll-behavior en CSS nos permite definir si la ubicación de desplazamiento del navegador salta a una nueva ubicación o anima sin problemas la transición cuando un usuario hace clic en un enlace que se dirige a una posición anclada dentro de un cuadro de desplazamiento.
Ejemplo de uso de scroll-behavior
Si te gustaría utilizar esta propiedad de CSS en tu stylesheet, hazlo de esta manera:
html {
scroll-behavior: smooth;
}Otro ejemplo más avanzado de .scroll-behavior es el siguiente de CODEPEN:
Sintaxis de .scroll-behavior en CSS
scroll-behavior: auto|smooth|initial|inherit;Valores
| Valor | Descripción |
|---|---|
| auto | Permite un "efecto de desplazamiento" de salto directo entre elementos dentro del cuadro de desplazamiento. esto es por defecto |
| suave | Permite un "efecto de desplazamiento" animado suave entre elementos dentro del cuadro de desplazamiento. |
| inicial | Establece esta propiedad en su valor predeterminado. |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .scroll-behavior
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| tab-size | 21.0 | 79.0 | 4.0 -moz- | 6.1 | 15.0 10.6 -o- |
