Caixa de rolagem HTML
Crie uma caixa com texto de rolagem usando CSS e HTML
Um HTML caixa de rolagem é uma caixa que adiciona barras de rolagem ao lado direito e inferior quando o conteúdo da caixa é maior que as dimensões da caixa. Em outras palavras, se você tiver uma caixa que pode conter cerca de 50 palavras e um texto de 200 palavras, uma caixa de rolagem HTML colocará barras de rolagem para cima para permitir que você veja as 150 palavras adicionais. No HTML padrão, isso simplesmente empurraria o texto extra para fora da caixa.
Fazer a rolagem do HTML é bastante fácil. Você só precisa definir a largura e altura do elemento que você deseja rolar e, em seguida, use o CSS propriedade overflow para definir como você deseja que a rolagem ocorra.
Hamza Tarkkol/Getty Images
O que fazer com texto extra?
Quando você tem mais texto do que cabe no espaço do seu layout, você tem algumas opções:
- Reescreva o texto para que fique mais curto e se ajuste.
- Permita que o texto flua além dos limites e espere que o layout possa ser flexível para suportá-lo.
- Corte o texto onde ele transborda.
- Adicione barras de rolagem (geralmente verticais para texto) para que o espaço role para mostrar o texto extra.
A melhor opção é normalmente a última opção: criar uma caixa de texto de rolagem. Então o texto extra ainda pode ser lido, mas seu design não é comprometido.
HTML e CSS para isso seria:
|_+_| |_+_| |_+_|o estouro: automático; diz ao navegador para adicionar barras de rolagem se elas forem necessárias para evitar que o texto ultrapasse os limites da div. Mas para que isso funcione, você também precisa das propriedades de estilo de largura e altura definidas no div, para que haja limites para estourar.
Você também pode cortar o texto alterando overflow: auto; para estouro: oculto; Se você deixar de fora a propriedade overflow, o texto ultrapassará os limites da div.
Você pode adicionar barras de rolagem a mais do que apenas texto
Se você tiver uma imagem grande que deseja exibir em um espaço menor, poderá adicionar barras de rolagem ao redor dela da mesma forma que faria com o texto.
|_+_| |_+_|
Neste exemplo, a imagem de 400x509 está dentro de um parágrafo de 300x300.
As tabelas podem se beneficiar das barras de rolagem
Tabelas longas de informações podem ficar muito difíceis de ler muito rapidamente, mas colocando-as dentro de um div de tamanho limitado e adicionando a propriedade overflow, você pode gerar tabelas com muitos dados que não ocupam muito espaço em sua página.
A maneira mais fácil é como com imagens e texto, basta adicionar uma div ao redor da tabela, definir a largura e a altura dessa div e adicionar a propriedade overflow:
|_+_| |_+_|Uma coisa que acontece quando você faz isso é que uma barra de rolagem horizontal geralmente aparece porque o navegador assume que o cromado das barras de rolagem está sobrepondo a tabela. Existem muitas maneiras de corrigir isso alterando a largura da tabela e outras. Mas o nosso favorito é simplesmente desligar a rolagem horizontal com a propriedade CSS 3 estouro-x
Basta adicionar estouro-x: oculto; para o div, e isso removerá a barra de rolagem horizontal. Certifique-se de testar isso, pois pode haver conteúdo que desaparece.
|_+_|Firefox suporta o uso das tags TBODY para estouro
Um recurso muito bom do navegador Firefox é que você pode usar a propriedade overflow em tags de tabela internas como tbody e thead ou tfoot. Isso significa que você pode definir barras de rolagem no conteúdo da tabela e as células de cabeçalho ficam ancoradas acima delas. Isso só funciona no Firefox, o que é muito ruim, mas é um bom recurso se seus leitores usarem apenas o Firefox. Navegue até este exemplo no Firefox para ver o que quero dizer.
|_+_| |_+_||_+_|