Hoje aprenderemos como colocar uma barra de rolagem em div no CSS, de modo que o conteúdo seja apresentado adequadamente de acordo com a rolagem.
Usar uma barra de rolagem em uma div nos permite a visualizar conteúdos que excedam as dimensões da div, proporcionando uma experiência de navegação mais fluída e facilitando a interação com o conteúdo.
Nesse exemplo, não irei criar um arquivo separado para o CSS. Para facilitar, irei colocar as marcações CSS dentro do próprio HTML. A esse tipo de uso do CSS chamamos de inline. CSS inline é uma forma de aplicar estilos diretamente em um elemento HTML, dentro da própria tag.
Para usar CSS inline utilizamos o atributo style=”” e dentro das aspas colocamos os estilos. Não é muito recomendado usar esse tipo de CSS dentro das tags, ou seja , usar modo inline, pois o seu uso excessivo pode dificultar a manutenção e organização do código. O mais recomendado mesmo é recomendado utilizar um arquivo separado somente para CSS e depois introduzi-lo em nosso arquivo HTML através de um link. Sim, um link dentro do HTML que aponta para o arquivo CSS – chamamos a esse modo de usar CSS em outro arquivo de CSS externo.
Veja nossos posts sobre CSS clicando aqui ou sobre o framework Bootstrap aqui.
Colocando barra de rolagem em nossa div
Para fazer uma barra de rolagem aparecer automaticamente em nosso elemento HTML, bastar usar a marcação CSS overflow:auto;
Abaixo uso uma div com altura e largura fixas em 300 e 400 pixels respectivamente.
<div style="height:300px; width: 400px; overflow:auto;" > <p>Bem-vindo ao CategoriaOutros.com.br, um portal digital cativante que oferece uma experiência única. Com uma diversidade de categorias, um design intuitivo e artigos perspicazes, este site proporciona uma jornada online envolvente. Explore, interaja na comunidade e descubra novas perspectivas em uma plataforma dinâmica e sempre atualizada. Embarque nessa jornada de descobertas com CategoriaOutros.com.br, onde a diversidade encontra qualidade.</p> <p>CategoriaOutros.com.br está sempre evoluindo, com atualizações constantes para manter seu conteúdo fresco e relevante. Essa abordagem dinâmica garante que os visitantes sempre encontrem algo novo e emocionante cada vez que retornam.</p> <p>Embarque nessa jornada única com CategoriaOutros.com.br e descubra um mundo de possibilidades. Seja você um entusiasta do conhecimento, amante da cultura ou simplesmente alguém em busca de diversão online, este site é feito para inspirar, cativar e surpreender.</p> </div>
Veja o resultado na imagem abaixo:
Podemos usar overflow:auto; para qualquer elemento ou tag HTML em nossa página.