Menu flutuante

The CSS Podcast - 034: Overflow

Quando o conteúdo se estende além do pai, há muitas opções de como você pode lidar com ele. Você pode rolar para adicionar mais espaço, cortar as bordas que estão fora da tela, indicar o corte com reticências e muito mais. O overflow é especialmente importante ao desenvolver para aplicativos de smartphone e vários tamanhos de tela.

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

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 o 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 descompactada. Portanto, também é necessário definir overflow como hidden e ter um valor white-space que impeça o agrupamento.

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

Como usar propriedades de overflow

As propriedades de overflow são definidas em um elemento para controlar o que acontece quando os filhos 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 o usuário movimenta uma imagem grande cortada para 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.

Você pode pensar no overflow em duas partes. O elemento pai tem um espaço firmemente limitado que não vai mudar. Pense nisso como uma janela. Os elementos filhos são o conteúdo que precisa de mais espaço do elemento pai. Pense nisso como o que você está vendo pela janela. Gerenciar o overflow ajuda a orientar como a janela enquadra esse conteúdo.

Rolagem no eixo vertical e horizontal

A propriedade overflow-y controla o overflow físico ao longo do eixo vertical da viewport do dispositivo, rolando para cima e para baixo.

A propriedade overflow-x controla o overflow ao longo do eixo horizontal da viewport do dispositivo, rolando para a esquerda e para a direita.

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

Compatibilidade com navegadores

• x
• x
• 69
• x

Origem

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

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 definir a 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 overflow: hidden, o conteúdo é cortado na direção especificada, e nenhuma barra de rolagem é mostrada.

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, as barras de rolagem vão estar presentes. Essa é uma ótima maneira de reduzir a mudança de layout no futuro, caso um contêiner possa ser rolável no futuro com base, por exemplo, no redimensionamento, e preparar visualmente o usuário para áreas roláveis.

overflow: clip

Como overflow: hidden, o conteúdo com overflow: clip é cortado 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 barras de rolagem, se necessário, mas as oculta por padrão e transfere a responsabilidade pela rolagem para o usuário e o navegador.

Observação: o uso da propriedade overflow com um valor diferente de visible cria um contexto de formatação de bloco.

Rolagem e overflow

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

Rolagem e acessibilidade

É importante garantir que a área rolável possa receber foco para que um usuário do teclado possa usar a tecla Tab para selecionar a caixa e depois 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 adequado. Exemplo:

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

O CSS pode ser usado para indicar que a caixa tem foco, usando a propriedade outline para dar uma dica visual de que ela agora pode ser rolada.

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ó vão permitir que a caixa seja rolada se ela tiver um atributo 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 dentro da caixa de padding e podem competir por espaço se inline e não overlaid. O módulo de modelo de caixa detalha essa possível fonte de mudança de layout.

root-scroller x implicit-scroller

Alguns roladores 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 scroller raiz em uma página. Por padrão, o documentElement é o scroller raiz da página. No entanto, ao mudar qual elemento é o scroller raiz, os comportamentos especiais podem ser aplicados a scrollers diferentes do documentElement. Chamamos esse novo scroller de scroller raiz implícito.

Para criar um scroller raiz, use a promoção de scroller posicionando um contêiner como fixo, garantindo que ele cubra toda a janela de visualização e esteja no índice z na parte de cima com um scroller. Confira um scroller raiz e um scroller implícito aninhado aqui.

O vídeo mostra um scroller raiz com comportamento de salto e novos recursos de estilo,
em comparação com um scroller implícito sem comportamento de rolagem aprimorado.

scroll-behavior

Compatibilidade com navegadores

• 61
• 79
• 36
• 15.4

Origem

scroll-behavior permite ativar a rolagem controlada pelo navegador para 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;
  }
}

overscroll-behavior

Compatibilidade com navegadores

• 63
• 18
• 59
• 16

Origem

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, à espreita do contêiner de rolagem pai. A propriedade overscroll-behavior permite impedir que a rolagem de overflow vaze para um contêiner pai (chamado de encadeamento de rolagem).

Teste seu conhecimento

Teste seus conhecimentos sobre overflow

O excesso de texto e o excesso de elementos são iguais?

verdadeiro

O estouro de texto é especial quando comparado ao de elemento.

falso

O estouro de texto geralmente está relacionado ao excesso de texto inline, enquanto o estouro de elementos é relacionado ao estouro de blocos.

A propriedade overflow aceita duas palavras-chave. A primeira palavra-chave é para qual eixo?

horizontal

🎉

categoria

Quase sempre, ao transmitir dois valores abreviados, o primeiro é horizontal.

Qual espaço no modelo de caixa as barras de rolagem consomem ao aparecer e inline?

caixa de conteúdo

Tente novamente.

caixa de padding

As barras de rolagem no modo overlay vão sobrepor o padding, e no modo inline vão adicionar ao padding.

caixa de borda

Tente novamente.

caixa da margem

Tente novamente.

Para capturar o momentum extra da rolagem em um scroller implícito aninhado, qual propriedade você usaria?

scroll-behavior

Tente novamente.

scroll-hint

Tente novamente.

overscroll-behavior

Definir essa propriedade como contain vai prender a rolagem.

scroll-padding

Tente novamente.

overscroll-effect

Tente novamente.

Recursos

Overflow And Data Loss In CSS from Smashing Magazine (em inglês)