El desplazamiento de desbordamiento (overflow scrolling) en CSS se refiere a un escenario en el que se desplaza el contenido que excede los límites de una caja o contenedor. Aquí te muestro cómo puedes hacerlo:
En primer lugar, necesitas definir un contenedor. En tu archivo HTML, esto puede verse similar a esto:
```
Tu contenido va aquí…
A continuación, en tu archivo CSS, puedes usar la propiedad `overflow` para especificar cómo se maneja el contenido que se desborda.
```
.contenedor {
width: 200px;
height: 200px;
overflow: auto;
}
```
Hay cuatro valores posibles para la propiedad `overflow`:
- `visible`: Este es el valor predeterminado. No recortará el contenido desbordado, por lo que el contenido fuera de la caja será visible y no habrá barras de desplazamiento.
- `hidden`: Este valor recortará todo el contenido desbordante y no proporcionará barras de desplazamiento.
- `scroll`: Este valor recortará todo el contenido desbordado, pero proporcionará barras de desplazamiento incluso si no es necesario.
- `auto`: Este valor es similar a la opción `scroll`, pero las barras de desplazamiento solo aparecerán cuando sean necesarias.
Ejemplo con `overflow:scroll`
```
.contenedor {
width: 200px;
height: 200px;
overflow: scroll;
}
```
En este caso, las barras de desplazamiento aparecerán siempre, incluso si no hay suficiente contenido como para desbordar.
Es importante mencionar que las propiedades `overflow-y` y `overflow-x` permiten controlar el desplazamiento vertical y horizontal respectivamente.
