Como posso adicionar uma barra de rolagem vertical à minha divisão automaticamente

Um recipiente de div em html pode ter vários elementos e sub-elementos e tem um tamanho específico. Portanto, às vezes é necessário adicionar uma barra de rolagem com o recipiente de div contêiner quando os itens excedem o limite de tamanho da div ou quando eles não se encaixam no contêiner DIV corretamente.

Este artigo discutirá o método útil de adicionar uma barra de rolagem vertical à divisão automaticamente usando o HTML e CSS.

Como adicionar uma barra de rolagem vertical à div?

Os desenvolvedores podem adicionar barras de rolagem vertical à div, aplicando o “Overflow-y: role”Propriedade, juntamente com outras propriedades do CSS no elemento de contêiner Div.

Exemplo

Vamos entender isso com um exemplo simples, criando primeiro um “div”Contêiner com alguns elementos HTML dentro dele e depois aplicando o CSS“transbordar”Propriedade para adicionar uma barra de rolagem vertical com a div:

A seguir estão alguns famosos front-end e back-end
línguas:

Pitão

JavaScript

Java

Php

C#

Ir

Rápido

Rubi

Matlab

TypeScript

Scala

Html

CSS

Ferrugem

Perl

SQL

R

Nosql

C

C++

No trecho de código acima:

• A "”O elemento foi adicionado com uma classe declarada como“Barra de rolagem”.
• O "”O contêiner tem uma lista de vinte idiomas de front-end e back-end dentro dele.

Agora, é necessário aplicar as propriedades CSS à DIV adicionando o seletor de classe:

.Barra de rolagem

Overflow-y: rolagem;
Max-Hight: 200px;
MAX-LUDA: 300PX;
Alinhamento de texto: centro;
Background-Color: Azure;

No trecho de código CSS acima:

• O "transbordamento-y”Propriedade com o valor“rolagem”É adicionado para criar uma barra de rolagem vertical para a div.
• Depois disso, o “altura máxima"Do contêiner Div foi definido como"200px" e a "largura máxima”Foi definido como“300px”.
• O valor do “alinhamento de texto”A propriedade é definida como“Centro”Para alinhar os itens dentro da div ao centro. Isso é feito apenas para fazer uma melhor apresentação do contêiner div.
• A cor de fundo para a div foi definida como “Azure”Isso diferenciará a aparência do contêiner da div do restante da tela.

Como resultado, o contêiner Div será criado e terá uma barra de rolagem vertical no lado direito:

É assim que podemos adicionar uma barra de rolagem vertical a uma divisão automaticamente.

Conclusão

A barra de rolagem vertical pode ser adicionada a uma divisão automaticamente, referindo -se ao elemento div através de um ID ou um seletor de classe no elemento de estilo CSS e depois aplicar o “Overflow-y: rolePropriedade para o elemento div. Os parâmetros da barra de rolagem aparecerão de acordo com as outras propriedades adicionadas como “altura máxima" e "largura máxima”Do contêiner Div. Este blog é um guia informativo sobre o método para adicionar uma barra de rolagem vertical a uma div.