HTML Scroll Box

Uma caixa de rolagem HTML é uma caixa que adiciona barras de rolagem no lado direito e na parte inferior quando o conteúdo da caixa é maior do que as dimensões da caixa. Em outras palavras, se você tiver uma caixa que pode conter cerca de 50 palavras e tiver texto de 200 palavras, uma caixa de rolagem HTML colocará barras de rolagem 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 HTML é bastante fácil. Você só precisa definir a largura e a altura do elemento que deseja rolar e, em seguida, usar a propriedade overflow CSS para definir como deseja que a rolagem ocorra.

Hamza TArkkol / Getty Images

O que fazer com o texto extra?

Quando você tem mais texto do que o espaço do layout, você tem algumas opções:

Reescreva o texto para que fique mais curto e caiba.
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. Assim, o texto extra ainda poderá ser lido, mas seu design não será comprometido. HTML e CSS para isso seriam:

type = “code”> texto aqui ….

type = “código”>

type = “code”> 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 do div. Mas para que isso funcione, você também precisa das propriedades de estilo de largura e altura definidas no div, de modo que haja limites para transbordar. 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 do div.

Você pode adicionar barras de rolagem a mais do que apenas texto

Se você tem uma imagem grande que gostaria de exibir em um espaço menor, pode adicionar barras de rolagem ao redor dela da mesma forma que faria com o texto.

type = “código”>

type = “code”> Neste exemplo, a imagem 400×509 está dentro de um parágrafo de 300×300.

As tabelas podem se beneficiar das barras de rolagem

Tabelas longas de informações podem ser muito difíceis de ler muito rapidamente, mas, ao colocá-las dentro de uma div de tamanho limitado e, em seguida, adicionar 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 um div ao redor da tabela, definir a largura e a altura desse div e adicionar a propriedade overflow:

type = “código”>

type = “code”> ….

type = “código”>

type = “code”> Uma coisa que acontece quando você faz isso é uma barra de rolagem horizontal geralmente aparece porque o navegador presume que o cromo das barras de rolagem está se sobrepondo à mesa. Existem muitas maneiras de corrigir isso alterando a largura da mesa e outros. Mas nosso favorito é simplesmente desligar a rolagem horizontal com a propriedade CSS 3 overflow-x

Basta adicionar overflow-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.

type = “código”>

Firefox suporta o uso de tags TBODY para overflow

Um recurso realmente interessante 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 do cabeçalho permanecerão ancoradas acima delas. Isso só funciona no Firefox, o que é muito ruim, mas é um bom recurso se seus leitores usam apenas o Firefox. Navegue até este exemplo no Firefox para ver o que quero dizer. … NamePhoneJennifer502-5366

type = “código”>

type = “code”> …

type = “code”> Mais da Lifewire

Como usar CSS para centralizar imagens e outros objetos HTML
Como adicionar uma legenda da web que permaneça com sua imagem
Como definir o estilo de IFrames com CSS
Como inserir linhas em HTML com a tag HR
Como fazer uma imagem flutuar à direita do texto
Adicionar imagens a páginas da web usando HTML
Como construir um layout de 3 colunas em CSS
Alterar a cor de fundo de uma tabela HTML

Como criar um índice em miniatura para um documento do Word
Como criar espaços em branco com as tags ‘p’ e ‘br’
Como flutuar uma imagem à esquerda do texto em uma página da web
Como configurar barras de rolagem no macOS e OS X
Ocultar / mostrar barras de rolagem e redefinir o intervalo do controle deslizante vertical no Excel
Estilos de contorno CSS
Usando atributos do elemento HTML TABLE
Criação de conteúdo rolável em HTML5 e CSS3 sem MARQUEE

Seus direitos de privacidade

A Lifewire e nossos parceiros terceirizados usam cookies e processam dados pessoais como identificadores exclusivos com base em seu consentimento para armazenar e / ou acessar informações em um dispositivo, exibir anúncios personalizados e para medição de conteúdo, percepção do público e desenvolvimento de produtos. Para alterar ou retirar suas opções de consentimento para Lifewire.com, incluindo seu direito de contestar quando um interesse legítimo é usado, clique abaixo. A qualquer momento, você pode atualizar suas configurações por meio do link “Privacidade da UE” na parte inferior de qualquer página. Essas escolhas serão sinalizadas globalmente para nossos parceiros e não afetarão os dados de navegação. Lista de parceiros (fornecedores)

Nós e nossos parceiros processamos dados para:

Digitalize ativamente as características do dispositivo para identificação. Use dados precisos de geolocalização. Armazene e / ou acesse informações em um dispositivo. Selecione o conteúdo personalizado. Crie um perfil de conteúdo personalizado. Avalie o desempenho do anúncio. Selecione anúncios básicos. Crie um perfil de anúncios personalizados. Selecione anúncios personalizados. Aplique pesquisas de mercado para gerar insights do público. Avalie o desempenho do conteúdo. Desenvolva e melhore produtos. Lista de parceiros (fornecedores)