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. |
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;
}
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.
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
:
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.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev