Propiedad scroll-behavior de CSS

La propiedad CSS scroll-behavior define si el comportamiento del desplazamiento debe ser suave o abrupto dentro de un cuadro desplazable.

Esta propiedad no tiene efecto en los desplazamientos realizados por el usuario. La propiedad scroll-behavior especificada en el elemento body no se propagará al viewport. Debe especificarse para el elemento html.

Los agentes de usuario pueden ignorar esta propiedad.

Valor inicial	auto
Se aplica a	Cajas desplazables.
Heredable	No.
Animable	No.
Versión	Módulo CSSOM View (Borrador de trabajo)
Sintaxis DOM	object.style.scrollBehavior = "smooth";

Sintaxis

Sintaxis de CSS scroll-behavior

css

scroll-behavior: auto | smooth | initial | inherit;

Ejemplo de la propiedad scroll-behavior con el valor "auto":

Ejemplo de código de CSS scroll-behavior

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        scroll-behavior: auto;
      }
      #element1 {
        height: 600px;
        background-color: #ccc;
      }
      #element2 {
        height: 600px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Scroll-behavior property example</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Click to scroll to Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Click to scroll to Element 1</a>
    </div>
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad scroll-behavior con el valor "smooth":

Ejemplo de CSS scroll-behavior con valor smooth

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        scroll-behavior: smooth;
      }
      #element1 {
        height: 600px;
        background-color: #ccc;
      }
      #element2 {
        height: 600px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Scroll-behavior property example</h2>
    <div class="main" id="element1">
      <h2>Element 1</h2>
      <a href="#element2">Click to scroll to Element 2</a>
    </div>
    <div class="main" id="element2">
      <h2>Element 2</h2>
      <a href="#element1">Click to scroll to Element 1</a>
    </div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción
auto	Hay un comportamiento de desplazamiento abrupto entre los elementos.
smooth	Hay un comportamiento de desplazamiento suave entre los elementos.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué controla la propiedad CSS 'scroll-behavior' en una página web?

Controla el color del texto en una página web.Controla el color de fondo de una página web.Controla si una página web se puede desplazar o no.Controla el mecanismo de desplazamiento de la página, es decir, si las transiciones de desplazamiento de la página son suaves.

Propiedad scroll-behavior de CSS ​

Sintaxis ​

Ejemplo de la propiedad scroll-behavior con el valor "auto": ​

Ejemplo de la propiedad scroll-behavior con el valor "smooth": ​