Crear un Div desplazable en HTML

1. Use la propiedad overflow de CSS para hacer que un div se pueda desplazar verticalmente en HTML
2. Use la propiedad overflow-y de CSS para hacer que un div se pueda desplazar horizontalmente en HTML

Este artículo presentará la forma de hacer que un div se pueda desplazar en HTML. Exploraremos los desplazamientos verticales y horizontales y veremos su implementación a través de ejemplos.

Use la propiedad overflow de CSS para hacer que un div se pueda desplazar verticalmente en HTML

Usar la propiedad overflow de CSS es probablemente la forma más fácil de hacer que un div se pueda desplazar en HTML. La propiedad overflow es útil cuando el contenido desborda el bloque de un div.

Podemos usar la propiedad para recortar el contenido y agregar las barras de desplazamiento. Podemos lograrlo configurando la propiedad overflow en auto.

Como resultado, el contenido del div se recortará y se agregará una barra de desplazamiento. En consecuencia, podremos desplazar el div verticalmente.

Tenga en cuenta que la propiedad overflow no funciona para los div cuya altura no se especifica.

Veamos un código de ejemplo de cuando el contenido excede el límite de alto y ancho especificado.

Por ejemplo, cree un div llamado div1 con algún contenido ficticio. En CSS, establezca la altura y el ancho del div en 200px.

Asegúrese de que el texto ficticio dentro del div sea largo para exceder la longitud del div.

Código de ejemplo:

<div class = "div1">
    What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>

body{
    background: white;
}
.div1{
    height : 200px;
    width: 200px;
}

Sin overflow: auto;, el contenido ocupa más espacio del asignado para su div. Esto no es lo que queremos, así que usemos la propiedad overflow para administrar el contenido.

Código de ejemplo:

body{
    background: white;
}
.div1{
    max-height : 200px;
    width: 200px;
    overflow: auto;
}

<div class = "div1">
    What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>

Con overflow: auto;, el texto ficticio se recorta en el ancho y alto especificados, y aparece una barra de desplazamiento para que podamos desplazar el div verticalmente para ver todo el contenido. Si desea que aparezca una barra de desplazamiento cada vez, incluso si la altura y el ancho son suficientes, puede usar overflow-y: scroll; en cambio.

Por lo tanto, podemos usar la propiedad overflow de CSS para crear un div desplazable verticalmente en HTML.

Use la propiedad overflow-y de CSS para hacer que un div se pueda desplazar horizontalmente en HTML

Para hacer que un div se pueda desplazar horizontalmente, todo lo que tenemos que hacer es mantener overflow-x: auto; y overflow-y: oculto; con el uso de una propiedad extra white-space: nowrap;. Apliquemos la siguiente propiedad CSS en nuestro bloque HTML previamente escrito.

Por ejemplo, establezca la altura de una división div1 en 100px. Luego configure las propiedades desbordamiento y espacio en blanco como se mencionó anteriormente.

La propiedad overflow-x: auto asegura una disposición de desplazamiento si el contenido excede la dimensión de div en el eje x.

Del mismo modo, overflow-y configurado en oculto recorta el contenido y no se mantiene ninguna disposición de desplazamiento en el eje y. Hemos utilizado el valor nowrap para la propiedad white-space para evitar saltos de línea.

Código de ejemplo:

.div1{
    height : 100px;
    width: 300px;

    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
}

<div class = "div1">
    What is Lorem Ipsum? Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages and more recently with desktop publishing software like Aldus PageMaker, including versions of Lorem Ipsum.
</div>