Scroll y Overflow

Suavizar efecto de scroll

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 Valores Descripción
scroll-behavior auto | smooth Aplicado sobre <html>, suaviza ciertos desplazamientos de scroll.
overflow-x visible | hidden | clip | scroll | auto Muestra/oculta la barra de desplazamiento horizontal del elemento.
overflow-y visible | hidden | clip | scroll | auto Muestra/oculta la barra de desplazamiento vertical del elemento.
overflow overflow-x overflow-y Propiedad de atajo para las dos anteriores.
overflow overflow Propiedad de atajo que aplica el valor overflow tanto a x como a y.

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:

Valor Descripción
visible No se controla el desbordamiento, el contenido simplemente se desborda. Valor por defecto.
hidden Oculta el contenido desbordado y las barras de desplazamiento del elemento.
clip Igual que hidden, pero no permite desplazamiento mediante programación.
scroll Oculta el contenido desbordado y muestra barras de desplazamiento.
auto El navegador decide. Generalmente, aplica scroll.

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:

La propiedad overflow en CSS: visible, hidden, 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.

Tabla de contenidos