Menu flutuante

Podcast do CSS - 034: Overflow

Quando o conteúdo se estende para além do conteúdo pai, há muitas opções de como ele pode ser processado. Você pode rolar a tela para adicionar mais espaço, cortar as bordas excedentes, indicar o corte com reticências e muito mais. É muito importante considerar o estouro ao desenvolver aplicativos para celulares e telas de vários tamanhos.

Há duas opções de recorte diferentes no CSS: A text-overflow ajuda com linhas individuais de texto, e as propriedades overflow ajudam a controlar o estouro no modelo de caixa.

Estouro de linha única com text-overflow

Use a propriedade text-overflow em qualquer elemento que contenha nós de texto, por exemplo, um parágrafo, <p>. Ele especifica como o texto aparece quando não cabe no espaço disponível do elemento. Todo texto HTML visível em uma página está em nós de texto. Para usar text-overflow, você precisa de uma única linha de texto sem quebra de linha. Portanto, também precisa definir overflow como hidden e ter um valor white-space que evite o ajuste.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Como usar propriedades de sobrecarga

As propriedades de estouro são definidas em um elemento para controlar o que acontece quando os filhos dele precisam de mais espaço do que o disponível. Isso pode ser intencional, como em um mapa interativo, como o Google Maps, em que um usuário explora uma imagem grande recortada em um tamanho específico. Também pode ser não intencional, como em um aplicativo de chat em que o usuário digita uma mensagem longa que não cabe no balão de texto.

O transbordamento pode ser dividido em duas partes. O elemento pai tem um espaço firmemente restrito que não mudará. Pense nisso como uma janela. Os elementos filhos são conteúdos que precisam de mais espaço do pai. Pense nisso como o que você olha pela janela. O gerenciamento do overflow ajudará a orientar a forma como a janela agrupa esse conteúdo.

Rolagem no eixo vertical e horizontal

A propriedade overflow-y controla o estouro físico ao longo do eixo vertical da janela de visualização do dispositivo, rolando para cima e para baixo.

A propriedade overflow-x controla o transbordamento ao longo do eixo horizontal da janela de visualização do dispositivo, rolando para a esquerda e para a direita.

Propriedades lógicas para a direção de rolagem

As propriedades overflow-inline e overflow-block definem o estouro com base na direção do documento e no modo de gravação.

A abreviação overflow

A abreviação overflow define os estilos overflow-x e overflow-y em uma linha:

overflow: hidden scroll;

Se duas palavras-chave forem especificadas, a primeira será aplicada a overflow-x e a segunda a overflow-y. Caso contrário, overflow-x e overflow-y usam o mesmo valor.

Valores

Vamos analisar em mais detalhes os valores e as palavras-chave disponíveis para as propriedades overflow.

overflow: visible (padrão)

Sem a definição da propriedade, overflow: visible é o valor padrão para a Web. Isso garante que o conteúdo nunca seja ocultado acidentalmente e segue os princípios básicos de "nunca ocultar conteúdo" ou "layouts seguros de layouts precisos".

overflow: hidden

Com o overflow: hidden, o conteúdo é recortado na direção especificada e nenhuma barra de rolagem é fornecida para mostrá-lo.

overflow: scroll

O overflow: scroll ativa as barras de rolagem para que os usuários naveguem pelo conteúdo. Mesmo que o conteúdo não esteja transbordando no momento, as barras de rolagem vão estar presentes. Essa é uma ótima maneira de reduzir a futura mudança de layout se um contêiner puder ser rolável no futuro, por exemplo, no redimensionamento, e preparar visualmente o usuário para áreas roláveis.

overflow: clip

Assim como overflow: hidden, o conteúdo com overflow: clip é recortado na caixa de padding do elemento. A diferença entre clip e hidden é que a palavra-chave clip também proíbe toda a rolagem, incluindo a programática.

overflow: auto

Por fim, o valor mais usado, overflow: auto. Isso respeita as preferências do usuário e mostra as barras de rolagem, se necessário, mas as oculta por padrão e dá a responsabilidade de rolar a tela ao usuário e ao navegador.

Rolagem e estouro

Muitos desses comportamentos de overflow introduzem uma barra de rolagem, mas há alguns comportamentos e propriedades específicos que podem ajudar a controlar a rolagem no contêiner flutuante.

Rolagem e acessibilidade

É importante garantir que a área rolável aceite o foco para que um usuário do teclado possa usar a tecla Tab até chegar à caixa e, em seguida, usar as teclas de seta para rolar.

Para permitir que uma caixa de rolagem aceite o foco, adicione tabindex="0", um nome com o atributo aria-labelledby e um atributo role apropriado. Exemplo:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

O CSS pode ser usado para indicar que a caixa está em foco, usando a propriedade outline para dar uma indicação visual de que agora será rolável.

Em Como usar CSS para aplicar a acessibilidade, Adrian Roselli mostra como o CSS pode ajudar a evitar regressões de acessibilidade. Por exemplo, para ativar a rolagem e adicionar o indicador de foco apenas se os atributos corretos forem usados. As regras a seguir só tornarão a caixa rolável se ela tiver os atributos tabindex, aria-labelledby e role.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Posicionamento da barra de rolagem no modelo de caixa

As barras de rolagem ocupam espaço na caixa de padding e podem competir por espaço se forem inline, e não overlaid. O módulo de modelo de caixa detalha mais essa possível fonte de mudança de layout.

root-scroller x implicit-scroller

Você pode notar que alguns controles de rolagem têm um comportamento de puxar para atualizar e outros comportamentos especiais, especialmente ao desenvolver para aplicativos móveis e híbridos. Esse comportamento de rolagem acontece no botão de rolagem raiz. Há apenas um botão de rolagem raiz em uma página. Por padrão, documentElement é o botão de rolagem raiz da página. No entanto, ao mudar qual elemento é o botão de rolagem raiz, os comportamentos especiais podem ser aplicados a controles de rolagem diferentes do documentElement. Chamamos esse novo botão de rolagem raiz implícito.

Para criar um botão de rolagem raiz, use algo chamado promoção de rolagem posicionando um contêiner como fixo, garantindo que ele cubra toda a janela de visualização e fique com o Z-index na parte superior com um botão de rolagem. Teste um botão de rolagem raiz em vez de um botão de rolagem implícito aninhado aqui.

scroll-behavior

scroll-behavior permite que você ative a rolagem controlada pelo navegador para os elementos. Isso permite especificar como a navegação na página, como .scrollTo() ou links, é processada.

Isso é útil principalmente quando usado com prefers-reduced-motion para especificar o comportamento de rolagem com base na preferência do usuário.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

comportamento de rolagem

Se você já chegou ao fim de uma sobreposição modal e depois continuou rolando a página por trás dela, isso se refere ao encadeamento de rolagem, ou seja, o fluxo do contêiner de rolagem pai. A propriedade overscroll-behavior permite evitar o vazamento da rolagem flutuante para um contêiner pai, o que é chamado de encadeamento de rolagem.

Teste seu conhecimento

Teste seu conhecimento sobre estouro

Recursos

Overflow and Data Loss in CSS da revista Smashing (em inglês)