24.02.2025

Determinando o Transbordo do Conteúdo de Elemento HTML com JavaScript

Resumo Rápido

// Use este método confiável para determinar o transbordo do conteúdo:
let el = document.querySelector('.elemento');
let transbordo = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
// Uhu, agora você tem uma variável booleana que indica o transbordo.

Detectar transbordo pode ser simples!

Armadilhas da Propriedade de Transbordo e suas Características

A propriedade overflow com valores de visible, hidden, scroll ou auto pode apresentar certos desafios. O comportamento de visible é especialmente complicado quando o conteúdo transborda, mas scrollWidth/scrollHeight permanecem inalterados. Vamos contornar esse truque alterando temporariamente o overflow para hidden:

// Gerencie com cuidado os estilos de transbordo:
function detectarTransbordo(elemento) {
  let estiloOverflowAnterior = elemento.style.overflow;
  if (!estiloOverflowAnterior || estiloOverflowAnterior === 'visible') {
    elemento.style.overflow = 'hidden'; // Oculte o conteúdo para uma medição precisa
  }
  let statusTransbordo = elemento.scrollWidth > elemento.clientWidth || elemento.scrollHeight > elemento.clientHeight;
  // Restaure o valor original do overflow, por favor mantenha a ordem.
  elemento.style.overflow = estiloOverflowAnterior;
  return statusTransbordo;
}

Agora, o overflow não é um problema para nós.

Compatibilidade entre Navegadores: Parecendo Fácil, é Difícil

Os navegadores sempre apresentam um desafio para os desenvolvedores. Para tornar a verificação de transbordo universal, você precisará:

1. Utilizar detecção de recursos, não detecção de navegador. Não confie em recursos que os navegadores podem não suportar.
2. Aplicar prefixos de fornecedor nas propriedades CSS que controlam o transbordo e o tamanho.
3. Testar seu código em vários navegadores. Todos são únicos, assim como flocos de neve.

Transbordo Oculto e Barras de Rolagem Enganosas

As barras de rolagem, que servem como indicadores, podem às vezes ser enganosas. Elementos da interface do usuário podem ocultar esses marcadores úteis. Para uma detecção de transbordo mais precisa, considere a seguinte abordagem:

// O transbordo pode ser um predador que rouba barras de rolagem na savana do navegador 🦁
function verificarTransbordoOculto(elemento) {
  return {
    horizontal: elemento.scrollWidth > elemento.offsetWidth,
    vertical: elemento.scrollHeight > elemento.offsetHeight
  };
}

Esse método garante a detecção de transbordo sem a necessidade de barras de rolagem visíveis.

Visualização Conceitual 🖼️

Imagens visuais para programadores podem ser um desafio, mas vamos imaginar momentaneamente um elemento HTML como um balde. Se o conteúdo do balde transborda, então estamos lidando com transbordo.

| Balde (Elemento HTML) | Conteúdo (Água) | Transbordo (Derramando) |
|-----------------------|------------------|--------------------------|
| Estado Normal         | 🪣               | Nenhum 🟢                |
| Estado de Transbordo  | 🪣💧             | Presente 🔴             |

Podemos verificar isso via JavaScript:

let balde = document.querySelector('.balde');
let estaTransbordando = balde.scrollHeight > balde.clientHeight;

E os resultados serão os seguintes:

- Sem Transbordo: 🪣🟢
- Com Transbordo: 🪣💧🔴

Assim como um balde não pode conter uma quantidade ilimitada de água, as dimensões de um elemento HTML também são limitadas.

Atenção: Casos Complexos e Melhores Práticas

Ao determinar o transbordo, é essencial considerar os seguintes pontos:

1. Margens e Bordas: clientWidth e clientHeight levam em conta o preenchimento, mas não consideram bordas. O transbordo ocorre se a soma dos tamanhos do conteúdo e do preenchimento exceder as dimensões do elemento.

2. Elementos Invisíveis: Verifique o transbordo somente após o elemento se tornar visível na página.

3. Conteúdo Dinâmico: Use tratadores de eventos ou MutationObserver para acompanhar alterações no conteúdo.

4. Elementos de Exibição Inline: Esses elementos não têm valores de scrollWidth e scrollHeight, portanto, embale-os em um contêiner de bloco para uma detecção precisa de transbordo.

Recursos Úteis

1. overflow - CSS: Folhas de Estilo em Cascata | MDN — Um guia abrangente sobre o tema de transbordo do MDN.
2. javascript - Determinando o Transbordo do Conteúdo de Elemento HTML - Stack Overflow — Discussão e dicas sobre detecção de transbordo de desenvolvedores.
3. Tamanho do Elemento e Rolagem — Um guia sobre como trabalhar com tamanhos e rolagem em JavaScript.
4. Detectando Mudanças no DOM com JavaScript e Animações CSS — Aprenda como rastrear mudanças no DOM.
5. Entendendo o Transbordo em CSS por Ahmad Shahid — Um artigo inclusivo detalhando o overflow.
6. Exemplo no Codepen: Detecção de Transbordo — Uma demonstração visual dos métodos de detecção de transbordo.

Video

Navigation