Scroll y Overflow

Existen ciertas propiedades CSS que nos permiten ajustar el comportamiento por defecto, por ejemplo, al pulsar enlaces que llevan a un ancla (anchor) del documento. También podemos indicar como queremos que aparezcan las barras de scroll en un determinado elemento HTML.

En primer lugar, vamos a ver algunas de las propiedades básicas que tenemos en CSS para modificar el scroll de ratón:

Propiedad scroll-behavior

La propiedad scroll-behavior nos permite hacer un desplazamiento suavizado al pulsar, por ejemplo, sobre anclas de enlaces <a>. Generalmente, al pulsar sobre estas anclas, nos desplazamos directa e instantáneamente a nuestro objetivo. Sin embargo, estableciendo a smooth esta propiedad en el elemento html, podemos suavizar este scroll, de modo que se realiza de forma progresiva, muy suave:

html {
  scroll-behavior: smooth;
}

Ejemplo

Hagamos el siguiente ejemplo. Consideremos una página que tiene 3 secciones (slide). Cada una ocupa la parte visible del navegador. El usuario puede desplazarse entre ellas simplemente haciendo scroll de ratón, o pulsando en los enlaces ancla, que se encuentran dentro del elemento <nav> (ubicados en la parte superior derecha). Estos enlaces llevan a los id definidos posteriormente.

En este ejemplo, sin CSS, la propiedad scroll-behavior está definida a auto, por lo que el comportamiento del navegador suele ser acceder directamente a la sección, de forma instantánea:

<nav>
  <a href="#slide-1">Slide 1</a> ·
  <a href="#slide-2">Slide 2</a> ·
  <a href="#slide-3">Slide 3</a>
</nav>

<div class="container">
  <div class="slide" id="slide-1">
    <h1>Slide 1</h1>
  </div>
  <div class="slide" id="slide-2">
    <h1>Slide 2</h1>
  </div>
  <div class="slide" id="slide-3">
    <h1>Slide 3</h1>
  </div>
</div>

<style>
  html {
    /* scroll-behavior: smooth; */
  }

  body, h1 {
    margin: 0;    /* Reset margins */
  }

  nav {
    position: fixed;
    top: 5px;
    right: 5px;
    background: white;
    padding: 5px 10px;
  }

  .container {
    height: 100vh;
  }

  .slide {
    height: 100%;
    background: var(--color, #aaa);
  }

  .slide:nth-child(2) { --color: steelblue; }
  .slide:nth-child(3) { --color: tomato; }
</style>

Sin embargo, si descomentamos la parte comentada de CSS, aplicaremos el suavizado en desplazamiento, por lo que al pulsar sobre los enlaces ancla, observaremos que el desplazamiento entre secciones se hace de forma suave.

Propiedad overflow

Por otro lado, mediante la propiedad overflow y sus derivadas overflow-x y overflow-y, podemos gestionar el desbordamiento de contenido en un elemento. Por ejemplo, imaginemos que tenemos un elemento de 500x500, pero le ponemos tanto contenido en su interior, que ocupa más de esa dimensión.

Por defecto, el navegador desborda el contenido del elemento, sin embargo, nosotros podemos decidir que hacer:

Así se vería un cuadrado con texto, cuando se desborda su contenido, dependiendo de si utilizamos en la propiedad overflow los valores visible, hidden o scroll:

Ten en cuenta que overflow-x aplica estos valores a la barra de desplazamiento horizontal, overflow-y a la barra de desplazamiento vertical, mientras que overflow puedes utilizarlo con un parámetro para indicar el mismo valor a ambos ejes, o con dos parámetros para indicar uno para overflow-x y otro para overflow-y respectivamente.