Změnit velikost Observer

Vytváření webových stránek, které jsou reaktivní a responzivní, se dříve považovalo za pokročilé, ale schopnost reagovat je pro úspěšné weby a aplikace nezbytností. Přidali jsme dotazy na média, matchMedia a řadu dalších rozhraní API, které vývojářům pomohou usnadnit odezvu, a nyní máme nové:ResizeObserver . Pomocí rozhraní Resize Observer API můžeme sledovat změnu velikosti jednotlivých prvků!

Pomocí ResizeObserver

Chcete-li naslouchat změnám velikosti prvků, vytvořte ResizeObserver instance a volání observe , předávání prvku:

const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    // Now do something with the resized element
    if (entry.contentRect.width < 1000) {
      // Stop making AJAX calls for content...
    }
  }
});
observer.observe(document.querySelector('div'));

entry poskytuje cílový prvek a také jeho rozměry a umístění:

entry = {
  target: div, // The element passed to `observe`
  contentRect: {
  bottom: 88,
  height: 88,
  left: 0,
  right: 1043,
  top: 0,
  width: 1043,
  x: 0,
  y: 0
  }
}

Mediální dotazy a matchMedia poskytují možnost upravit zobrazení pomocí CSS, ale ne funkčnost, což je místo ResizeObserver zapadá.

Před lety jsem vytvořil hack pro špehování prvků pomocí CSS, mediálních dotazů a :before , ale ke správnému fungování vyžadoval dotazování pomocí JavaScriptu. Mít legitimní, optimalizované JavaScript API k dosažení stejného je osvěžující a zoufale potřebné!