Os desenvolvedores da Web usam componentes HTML, como cabeçalhos e rodapés, navegação, div, imagem e muitos outros para dividir uma página da web e incorporar conteúdo. Mais especificamente, o “”O elemento é um componente HTML popular que fornece uma maneira fácil de dividir uma página em seções. Alguns usuários desejam fazer os componentes "" roláveis ​​verticalmente ou horizontalmente para economizar espaço na página da web.

Este post demonstrará o método para fazer uma div verticalmente rolável, utilizando CSS.

Como fazer/criar uma div verticalmente rolável com CSS?

Para criar uma div verticalmente rolável utilizando CSS, siga as instruções fornecidas.

Etapa 1: Adicionar cabeçalho

Primeiro de tudo, adicione um “”Tag para adicionar dados no centro da página. Em seguida, insira o cabeçalho utilizando o “

" marcação.

Etapa 2: Crie um recipiente de div em HTML

Depois disso, crie um ““Contêiner e atribua a classe chamada“Scroll-Div”. Depois disso, adicione algum texto ou um parágrafo entre as tags:

Site Linuxhint

Linuxhint é um site popular para criação de conteúdo. Ele construiu muitos produtos para ajudá -lo a aprender sobre Linux, programação, ciência da computação e muito mais. Esta plataforma oferece trabalho em diferentes categorias, incluindo HTML/CSS, JavaScript, Git, Windows, Dockers, Discord e muitos outros. Ele fornece um guia completo sobre essas categorias. Os usuários podem encontrar qualquer tópico relacionado à categoria mencionada. Nesta situação, se você é iniciante, pode se referir a diretrizes para escrever um artigo.

Saída

Etapa 3: cabeçalho de estilo

Acesse o elemento de cabeçalho especificando o nome da tag entre as tags. Então, aplique o “cor”Propriedade para definir a cor do cabeçalho:

H1
Cor: RGB (81, 173, 226);

Pode -se observar que a cor do cabeçalho foi alterada:

Etapa 4: Faça Div Rollable

Em seguida, use o “.Scroll-Div”Classe para acessar o elemento HTML e aplicar as seguintes propriedades CSS:

.Scroll-Div
preenchimento: 5px;
margem: 5px;
Background-Color: RGB (179, 180, 233);
Largura: 400px;
Altura: 120px;
transbordamento-y: automático;
Overflow-x: Hidden;
Alinhamento de texto: justifique;

No código acima, as seguintes propriedades do CSS foram aplicadas:

• ““preenchimento"É definido como"5px”Para alocar o espaço dentro do elemento div.
• ““Margem"É definido como"5px”Para criar espaço fora do limite da div.
• ““cor de fundo”Atributo aloca a cor do elemento no fundo.
• ““largura”Especifica um tamanho de contêiner em largura.
• ““altura”Atributo aloca a altura do elemento.
• ““transbordamento-y”É usado para tornar o elemento rolável, definindo seu valor como“auto”:
• ““Overflow-x"É definido como"escondido”Para tornar o div verticalmente rolável apenas.
• ““ alinhamento de texto”É utilizado para alinhamento de texto. Por exemplo, alinhamos o texto como “justificar”.

Pode -se observar que tornamos com sucesso o div visticamente rolável:

Afirmamos o método para tornar o div verticalmente rolável usando CSS.

Conclusão

Para fazer uma div verticalmente rolável usando o CSS, primeiro, crie uma div com um atributo de classe. O atributo de classe é usado para acessar o “div" elemento. Então, defina o CSS “Overflow-x"Propriedade como"escondido" e a "transbordamento-y"Propriedade como"auto”No atributo de classe para tornar o elemento div verticalmente rolável. Este tutorial demonstrou o método para tornar o div verticalmente rolável usando CSS.