16.03.2025

Monitorando Mudanças de Tamanho de DIV com jQuery: Uma Solução

Resposta Rápida

A API ResizeObserver permite que você monitore o tamanho de um bloco DIV em tempo real. Ao criar uma função que responde a cada alteração de tamanho, podemos trabalhar com os novos valores:

const observer = new ResizeObserver(entries => {
  const {width, height} = entries[0].contentRect;
  console.log(`As dimensões mudaram: ${width}x${height}`);
});

observer.observe(document.querySelector('#divParaObservar'));

O código acima rastreia as mudanças de tamanho do elemento com o ID #divParaObservar e registra os novos valores de largura e altura sempre que eles mudam. ResizeObserver é suportado pela maioria dos navegadores modernos. No entanto, é importante ter em mente a necessidade de um polyfill para navegadores que não suportam ResizeObserver.

Usando a API ResizeObserver

Com ResizeObserver, você pode configurar um rastreamento detalhado das mudanças de tamanho de DIV em uma página da web, como se tivesse seu próprio detetive pessoal. Seria como dizer: "Senhoras e senhores! O tamanho do DIV acaba de mudar... elementar!"

Exemplo para Clareza

O exemplo abaixo demonstra como ResizeObserver funciona:

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`O DIV mudou de tamanho: ${width}px x ${height}px.`);
  }
});

// Elementar! - nosso detetive se manifesta.
resizeObserver.observe(document.getElementById('divResponsiva'));

Compatibilidade com Navegadores

Apesar do amplo suporte para ResizeObserver, alguns navegadores mais antigos não suportam essa API. Em tais casos, um polyfill pode ser útil:

if (!('ResizeObserver' in window)) {
  // Teremos que recorrer a métodos antigos
}

Alternativas e Melhorias

Se o uso do ResizeObserver não for adequado ou se funcionalidades adicionais forem necessárias, considere as seguintes opções:

Mantendo as Dimensões Sob Controle com ResizeSensor

ResizeSensor da biblioteca css-element-queries é uma alternativa eficaz:

const resizeSensor = new ResizeSensor('#meuElemento', function() {
  console.log('O tamanho mudou!');
});

Uma Solução Universal: ResizeObserver e Aliados

Combinar ResizeObserver, um manipulador de eventos de redimensionamento da janela, e MutationObserver pode criar uma ferramenta poderosa para rastrear as dinâmicas de tamanho:

window.addEventListener('resize', () => _verificar_mudancas(element));
const mutationObserver = new MutationObserver(() => _verificar_mudancas(element));
mutationObserver.observe(element, { childList: true, subtree: true });

Desempenho Ideal

Essas operações podem impactar negativamente o desempenho. Para reduzir a carga, use debouncing:

let timeoutId;
resizeObserver = new ResizeObserver(() => {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(() => {
    // Código importante é executado aqui
  }, 100);
});

Dominando CSS: Dicas

Aqui estão algumas recomendações práticas:

Seleção Intencional

Uma preparação cuidadosa dos seletors pode ajudar a evitar carga desnecessária, especialmente ao trabalhar com jQuery:

const $meuElemento = $('#meuElemento');
const resizeSensor = new ResizeSensor($meuElemento, function() {
  console.log('O tamanho do elemento mudou!');
});

Deixe o Antigo Para Trás

Tente evitar métodos desatualizados, como plugins de jQuery onresize ou o uso de setInterval e setTimeout para rastreamento de tamanho. Em vez disso, utilize APIs modernas.

Visualização

Imagine em sua mente: uma mesa de pingue-pongue representa uma página da web. A bola 🏓 atinge a borda e muda de tamanho devido à pressão:

Mesa de pingue-pongue:   [🔳🔲🔳🔲]
A bola atinge:          [🔳🔲🏓🔲]

Uma mesa sensorial (👀) que registra mudanças:

[🔳🔲🔳🔲] < - 🏓 -> [🔳🔲🏓🔲] 👀 "Ahá, o tamanho mudou!"

O sensor (👀) é nosso ResizeObserver, que monitora constantemente seus blocos DIV em busca de mudanças de tamanho.

const sensorPingPong = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`O tamanho da mesa de pingue-pongue mudou para: ${width}x${height}`);
  }
});
// "Atenção! O jogo começou!"
sensorPingPong.observe(document.querySelector('.mesaPingPong'));

Recursos Úteis

1. MDN - ResizeObserver – Informações detalhadas sobre a API ResizeObserver.
2. David Walsh - Resize Observer – Análise da aplicação de ResizeObserver no artigo de David Walsh.
3. Can I use - ResizeObserver – Visão geral do suporte ao ResizeObserver em diferentes navegadores.
4. Google's web.dev - ResizeObserver – Perspectivas do Google sobre como monitorar mudanças de tamanho de elementos.
5. GitHub - resize-observer-polyfill – Um polyfill para ResizeObserver, garantindo suporte à API em qualquer navegador.

Video

Navigation