W3docs
es
Iniciar sesión

Propiedad scroll-behavior de CSS

Use the scroll-behavior CSS property to specify the behavior of the scroll. See property values and examples.

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 inicialauto
Se aplica aCajas desplazables.
HeredableNo.
AnimableNo.
VersiónMódulo CSSOM View (Borrador de trabajo)
Sintaxis DOMobject.style.scrollBehavior = "smooth";

Sintaxis

Sintaxis de CSS scroll-behavior

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

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

Ejemplo de código de CSS scroll-behavior

<!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>
Pruébalo tú mismo »

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

Ejemplo de CSS scroll-behavior con valor smooth

<!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>
Pruébalo tú mismo »

Valores

ValorDescripción
autoHay un comportamiento de desplazamiento abrupto entre los elementos.
smoothHay un comportamiento de desplazamiento suave entre los elementos.
initialHace que la propiedad use su valor predeterminado.
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica

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