Menu flutuante

The CSS Podcast - 034: Overflow

Quando o conteúdo se estende além do elemento pai, há muitas opções de como lidar com isso. Aware UI permite rolar para adicionar mais espaço, cortar as bordas excedentes, indicar o corte com reticências e muito mais. O estouro é especialmente importante ao desenvolver para aplicativos de smartphone e vários tamanhos de tela.

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

Transbordamento 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 o texto HTML visível em uma página está em nós de texto. splicing. Para usar text-overflow, você precisa de uma única linha de texto sem quebra de linha. Portanto, também é necessário definir overflow como hidden e ter um valor white-space que impeça a quebra de linha.

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

Como usar propriedades de estouro

As propriedades de estouro 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 um 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 na bolha de texto.

Pense no estouro em duas partes. O elemento principal tem um espaço firmemente restrito que não muda. Pense nisso como uma janela. Os elementos filhos são conteúdos que querem mais espaço do elemento pai. Pense nisso como o que você está vendo pela janela. O gerenciamento de estouro vai ajudar a orientar como a janela enquadra esse conteúdo.

Rolagem nos eixos 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 estouro ao longo do eixo horizontal da janela de visualização do dispositivo, portanto, rola para a esquerda e para a direita.

Propriedades lógicas para 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 escrita.

A abreviação overflow

O atalho 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

Analise os valores e 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 sem querer 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 é fornecida para mostrá-lo.

overflow: scroll

overflow: scroll permite que as barras de rolagem ajudem os usuários a rolar o conteúdo. Mesmo que o conteúdo não esteja transbordando, as barras de rolagem vão aparecer. Essa é uma ótima maneira de reduzir a mudança de layout futura se um contêiner puder ser rolável no futuro com base, 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 é 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 as barras de rolagem se necessário, mas as oculta por padrão e transfere a responsabilidade de rolar a página para o usuário e o navegador.

Rolagem e estouro

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

Rolagem e acessibilidade

É importante garantir que a área rolável possa aceitar o foco para que um usuário de teclado possa usar a tecla Tab para acessar a caixa e 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 está em foco, usando a propriedade outline para dar uma pista visual de que ela agora pode ser rolada.

Em Using CSS to Enforce Accessibility, Adrian Roselli demonstra como o CSS pode ajudar a evitar regressões de acessibilidade. Por exemplo, para ativar apenas a rolagem e adicionar o indicador de foco se os atributos corretos forem usados. As regras a seguir só vão tornar a caixa rolável 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 explica melhor essa possível origem de mudança de layout.

মহিলা স্ক্রলার বনাম অন্তর্নিহিত স্ক্রলার

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

Para criar um scroller raiz, use algo chamado promoção de scroller. Para isso, posicione um contêiner como fixo, garantindo que ele cubra toda a janela de visualização e esteja com z-index na parte superior com um scroller. Confira um scroller raiz versus um scroller implícito aninhado aqui.

Estilizar a barra de rolagem

Você pode estilizar a barra de rolagem para incorporá-la ao design do seu site. scrollbar-color define a cor do controle deslizante e da margem da barra de rolagem.

Para mudar a largura da barra de rolagem, use scrollbar-width. Não é possível definir um comprimento arbitrário, mas é possível especificar que você quer uma barra de rolagem thin ou none.

scroll-behavior

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

Isso é especialmente útil 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

Se você já chegou ao fim de uma sobreposição modal, continuou rolando e a página atrás da sobreposição se moveu, isso é o encadeamento de rolagem ou a propagação até o contêiner de rolagem pai. A propriedade overscroll-behavior permite evitar que a rolagem de estouro vaze para um contêiner pai (chamado de encadeamento de rolagem).

Ajuste de rolagem

A rolagem geralmente é suave, permitindo que você posicione o conteúdo no scrollport onde quiser. Em alguns designs, como galerias de imagens ou conteúdo que emula páginas ou slides, talvez seja interessante fazer com que o conteúdo se ajuste ao viewport de rolagem.

Como configurar o contêiner de rolagem

Para ativar o ajuste de rolagem, adicione scroll-snap-type ao contêiner de rolagem. Primeiro, defina em qual eixo o ajuste de rolagem vai acontecer. Pode ser uma propriedade lógica (block ou inline), física (x ou y) ou both.

Também é possível definir o nível de rigor do ajuste de rolagem. A rigidez padrão é proximity, o que significa que o contêiner de rolagem tentará ajustar se possível. Você também pode definir a rigidez como mandatory para garantir que o contêiner de rolagem sempre se ajuste.

.scroll-container {
    scroll-snap-type: block mandatory;
}

O ajuste de rolagem alinha um elemento dentro dos limites totais do contêiner de rolagem, mas o que acontece se parte dele não estiver visível? Por exemplo, você pode ter um cabeçalho fixo sobrepondo parte do contêiner de rolagem. Para ajudar a alinhar os elementos ajustados à parte visível do contêiner de rolagem, defina scroll-padding.

Controlar os elementos ajustáveis

Para tornar um elemento ajustável, defina a propriedade scroll-snap-align como start, end ou center. Se a direção do ajuste de rolagem for both, você poderá definir dois valores. Isso define se uma borda do elemento vai se alinhar com a borda da porta de rolagem ou se vai ficar centralizada.

É possível ajustar o espaçamento ao redor das bordas do elemento ajustado com scroll-margin:

scroll-margin também é usado para definir o padding ao rolar até um elemento:

Para deixar a rolagem mais fixa, adicione scroll-snap-stop: always a um item em um contêiner de rolagem. Isso não impede que você role vários itens de uma só vez. Se você terminar um movimento de rolagem de forma que ele continue com inércia, a rolagem vai terminar na próxima posição de ajuste, em vez de continuar.

Teste seu conhecimento

Recursos

Estouro e perda de dados em CSS da Smashing Magazine