ResizeObserver în JavaScript

const obs = new ResizeObserver((intrari) => { ... });
obs.observe(element)
obs.unobserve(element)
obs.disconnect()

Ce face ResizeObserver

Evenimentul resize al ferestrei nu prinde schimbările unui element (de exemplu un panou lateral care se strânge). ResizeObserver urmărește direct elementele: fiecare intrare are target și contentRect (cu width și height), plus mărimi detaliate în borderBoxSize și contentBoxSize.

Funcția rulează o dată la observe și apoi la fiecare schimbare de mărime. unobserve și disconnect opresc observarea.

Parametri

Parametru	Descriere
functie	Primește (intrari, observator).

Ce returnează

Un observator.

Exemple

Exemplul 1: Un grafic care se adaptează containerului

Al doilea rând apare după îngustarea ferestrei.

const container = document.querySelector(".grafic");

const obs = new ResizeObserver(([intrare]) => {
  const latime = Math.round(intrare.contentRect.width);
  container.classList.toggle("compact", latime < 400);
  console.log("lățime:", latime);
});
obs.observe(container);

Rezultat în browser

lățime: 720
lățime: 360

Greșeli frecvente

• Schimbi mărimea elementului observat chiar în funcția observatorului. Browserul afișează eroarea ResizeObserver loop completed with undelivered notifications.

Comenzi înrudite

• IntersectionObserver: Anunță când un element intră sau iese din zona vizibilă: încărcare leneșă, animații la derulare, derulare infinită.
• matchMedia: Verifică din JavaScript o interogare media CSS: ecran mic, temă întunecată, mișcare redusă.
• getBoundingClientRect / elementFromPoint: Returnează poziția și mărimea unui element pe ecran; elementFromPoint face invers, din coordonate în element.