¿Cómo puedo agregar una barra de desplazamiento vertical a mi div automáticamente?

Un contenedor DIV en HTML puede tener múltiples elementos y subelementos y tiene un tamaño específico. Entonces, a veces es necesario agregar una barra de desplazamiento con el contenedor DIV cuando los elementos exceden el límite de tamaño del DIV o cuando no encajan correctamente en el contenedor DIV.

Este artículo discutirá el método útil para agregar una barra de desplazamiento vertical al DIV utilizando automáticamente el HTML y CSS.

Cómo agregar una barra de desplazamiento vertical al div?

Los desarrolladores pueden agregar barras de desplazamiento verticales al DIV aplicando el "Overflow-y: desplazarse"Propiedad junto con algunas otras propiedades CSS en el elemento de contenedor Div.

Ejemplo

Entendamos esto con un ejemplo simple creando primero un "div"Contenedor con algunos elementos HTML dentro y luego aplicando el CSS"DesbordamientoPropiedad para agregar una barra de desplazamiento vertical con el DIV:

Los siguientes son algunos famosos front-end y back-end
Idiomas:

Pitón

Javascript

Java

Php

C#

Ir

Rápido

Rubí

Matlab

Mecanografiado

Escala

Html

CSS

Óxido

Perl

Sql

Riñonal

Coso

C

C++

En el fragmento de código anterior:

• A ""El elemento se ha agregado con una clase declarada como"Barra de desplazamiento".
• El ""Container tiene una lista de veinte idiomas front-end y back-end dentro de él.

Ahora, se requiere aplicar las propiedades CSS al DIV agregando el selector de clases:

.Barra de desplazamiento

Overflow-y: desplazarse;
MAX-HEGHT: 200px;
MAX-ANCHO: 300PX;
Text-Align: Center;
Color de fondo: Azure;

En el fragmento de código CSS anterior:

• El "desbordamiento"Propiedad con el valor"Desplazarse"Se agrega para crear una barra de desplazamiento vertical para el Div.
• Después de eso, el "Altura máxima"Del contenedor Div se ha definido como"200px" y el "anchura máxima"Se ha definido como"300px".
• El valor del "texto alineado"La propiedad se establece como"centro"Para alinear los elementos dentro del divir al centro. Esto se hace solo para hacer una mejor presentación del contenedor Div.
• El color de fondo para el div se ha definido como "azur"Eso diferenciará la apariencia del contenedor Div del resto de la pantalla.

Como resultado, se creará el contenedor DIV y tendrá una barra de desplazamiento vertical en el lado derecho:

Así es como podemos agregar una barra de desplazamiento vertical a un DIV automáticamente.

Conclusión

La barra de desplazamiento vertical se puede agregar a un DIV automáticamente refiriéndose al elemento Div a través de una identificación o un selector de clase en el elemento de estilo CSS y luego aplica el "Overflow-y: desplazarse"Propiedad al elemento Div. Los parámetros de la barra de desplazamiento aparecerán de acuerdo con las otras propiedades agregadas como "Altura máxima" y "anchura máxima"Del contenedor Div. Este blog es una guía informativa sobre el método para agregar una barra de desplazamiento vertical a un div.