Ir para o conteúdo principal

Overflow

As classes utilitárias de overflow do WPF controlam como o conteúdo excedente de um elemento é tratado, permitindo gerenciar a visibilidade e o comportamento de rolagem em elementos com dimensões limitadas. Elas são ideais para layouts com contêineres, modais ou áreas de conteúdo restritas.

Como Funcionam as Classes de Overflow

As classes de overflow seguem uma sintaxe intuitiva que permite definir o comportamento geral ou por eixo (x ou y), com ou sem tipo específico (hidden, scroll, visible). O padrão overflow sem modificadores aplica overflow: auto; como valor padrão.

RegrasCSSGeradas
Atributos Válidos

Comportamento

auto
Deixa o navegador encarregado do comportamento. Seu funcionamento pode variar.
hidden
O conteúdo é cortado e nenhuma barra de rolagem é exibida.
scroll
O conteúdo é acessível através de barras de rolagem que são exibidas mesmo que o conteúdo não precise.
visible
Valor padrão. O conteúdo não é cortado e pode ser renderizado para fora da caixa de conteúdo.

As classes são traduzidas diretamente para propriedades CSS. Veja alguns exemplos:

  • overflow → overflow: auto;

  • overflow-x → overflow-x: auto;

  • overflow-y-hidden → overflow-y: hidden;

  • overflow-scroll → overflow: scroll;

Como Usar

As classes de overflow são aplicadas a elementos com dimensões definidas (ex.: width, height, max-width, max-height) para controlar o comportamento do conteúdo que excede essas dimensões. Elas são úteis para criar áreas roláveis, ocultar conteúdo excedente ou manter visibilidade.

Exemplo 1: Overflow Padrão

Aplica rolagem automática para conteúdo excedente em ambas as direções:

<div class="w-300px h-200px overflow">
  <p><!-- Conteúdo longo que excederá o contêiner... --></p>
</div>

Exemplo 2: Overflow por Eixo

Habilita rolagem horizontal, mas oculta o conteúdo vertical excedente:

<div class="w-300px h-200px overflow-x overflow-y-hidden">
  <p><!-- Conteúdo longo horizontalmente e verticalmente... --></p>
</div>

Exemplo 3: Overflow com Tipo Específico

Cria uma área com rolagem vertical forçada e conteúdo horizontal visível:

<div class="w-300px h-200px overflow-y-scroll overflow-x-visible">
  <p><!-- Conteúdo com rolagem vertical e visibilidade horizontal... --></p>
</div>

Exemplo 4: Combinação com Posicionamento

Usa overflow com classes de posicionamento e centralização:

<div class="relative w-100% h-400px overflow-hidden">
  <div class="absolute center(c) w-200px h-200px overflow-y-scroll">
    <p><!-- Conteúdo rolável centralizado... --></p>
  </div>
</div>

Notas

Dimensões: Sempre defina width, height, max-width ou max-height no elemento para que o overflow funcione corretamente.

Rolagem Automática: Use overflow ou overflow-(x|y) para rolagem apenas quando necessário.

Combinações: Combine com classes de posicionamento (absolute, relative, etc.) e offsets (top, left, etc.) para layouts complexos.

TiposForçar Rolagem: EscolhaAplicar o tipo hiddenscroll paraem ocultarum conteúdo,elemento scrollevita parao problema de barras de rolagem forçadaaparecendo oue visibledesaparecendo para manterquando o conteúdo visívelé semdinâmico. rolagem.Tenha em mente que Impressoras podem imprimir o conteúdo vazado.

As classes overflow-x e overflow-y são úteis para controle granular em layouts responsivos.

O valor visible pode causar sobreposição de conteúdo fora do contêiner, então use com cuidado.

Para áreas roláveis, certifique-se de que o contêiner tenha conteúdo suficiente para ativar a rolagem.

Voltar ao topo