Propiedad scroll-behavior

La propiedad scroll-behavior establece un desplazamiento suave o instantáneo dentro del elemento. La propiedad acepta dos valores auto (transición instantánea al elemento) y smooth (transición suave).

Sintaxis

cssselector {
  scroll-behavior: auto o smooth;
}

Ejemplo . Valor auto

Establezcamos el desplazamiento instantáneo:

html<div>text</div>
cssdiv {
  scroll-behavior: auto;
  width: 4000px;
  height: 2000px;
  background-color: #C2DDFD;
}

Результат:

Ejemplo . Valor smooth

Y ahora establezcamos el desplazamiento suave:

html<div>text</div>
cssdiv {
  scroll-behavior: smooth;
  width: 4000px;
  height: 2000px;
  background-color: #C2DDFD;
}

Результат:

Véase también

  • pseudoclase :fullscreen,
    que establece el estilo para elementos en modo de pantalla completa
  • pseudoclase :default,
    que establece el estilo para elementos por defecto