ResizeObserver API: Precisionsspårning av elementstorlek för dynamiska, responsiva layouter

I det stora och ständigt utvecklande landskapet av webbutveckling är skapandet av verkligt responsiva och anpassningsbara användargränssnitt en överordnad utmaning. Medan mediefrågor länge har fungerat som hörnstenen för att anpassa layouter till olika visningsområdesstorlekar, kräver den moderna webben ett mer granulärt tillvägagångssätt: responsivitet på komponentnivå. Det är här det kraftfulla ResizeObserver API kommer in och revolutionerar hur utvecklare spårar och reagerar på förändringar i ett elements storlek, oberoende av visningsområdet.

Denna omfattande guide kommer att djupdyka i ResizeObserver API, utforska dess mekanik, olika tillämpningar, bästa praxis och hur det ger utvecklare möjlighet att bygga mycket dynamiska och motståndskraftiga webbupplevelser för en global publik.

Förstå kärnproblemet: Varför window.resize inte räcker till

Under många år var den primära mekanismen för att reagera på layoutförändringar i webbläsaren händelsen window.resize. Utvecklare lade till händelselyssnare på window-objektet för att upptäcka när webbläsarens visningsområde ändrade dimensioner. Detta tillvägagångssätt har dock betydande begränsningar i dagens komponentdrivna värld:

• Endast centrerat på visningsområdet: Händelsen window.resize utlöses endast när webbläsarfönstret i sig ändrar storlek. Den ger ingen information om enskilda element i dokumentet som ändrar storlek på grund av andra faktorer.
• Begränsad räckvidd: En komponent kan behöva justera sin interna layout om dess föräldrabox krymper eller expanderar, även om den övergripande visningsområdesstorleken förblir konstant. Tänk på en sidomeny som fälls ihop, eller en flikpanel som visar nytt innehåll. window.resize ger ingen insikt i dessa lokala förändringar.
• Ineffektiv polling: För att spåra förändringar på elementnivå utan ResizeObserver, var utvecklare ofta tvungna att använda ineffektiva och prestandakrävande polling-mekanismer med setInterval, som upprepade gånger kontrollerade element.offsetWidth eller element.offsetHeight. Detta leder till onödiga beräkningar och potentiell "jank".
• Komplex kommunikation mellan komponenter: Att orkestrera storleksändringar mellan djupt nästlade eller oberoende komponenter blir en rörig härva utan ett direkt sätt för en komponent att känna till sitt eget tilldelade utrymme.

Tänk dig ett scenario där ett datavisualiseringsdiagram dynamiskt behöver ändra storlek när dess innehållande <div>-element justeras av en användare, kanske genom en dragbar delare. window.resize skulle vara värdelöst här. Detta är exakt den typ av utmaning som ResizeObserver är designad för att lösa.

Introduktion till ResizeObserver API

ResizeObserver API erbjuder ett prestandaeffektivt och effektivt sätt att observera förändringar i storleken på ett elements content-box eller border-box. Till skillnad från window.resize, som övervakar visningsområdet, fokuserar ResizeObserver på de specifika dimensionerna för ett eller flera måldom-element.

Det är ett kraftfullt tillskott till sviten av webb-API:er som låter utvecklare:

• Reagera på elementspecifika storleksändringar: Få en notis när ett observerat elements storlek ändras, oavsett om fönstret ändrade storlek eller inte. Detta inkluderar förändringar orsakade av CSS-layouter (flexbox, grid), dynamisk innehållsinjektion eller användarinteraktioner.
• Undvik oändliga storleksändringsloopar: API:et är utformat för att förhindra oändliga loopar som kan uppstå om en händelsehanterare för storleksändring direkt ändrar det observerade elementets storlek, vilket utlöser en ny storleksändringshändelse. ResizeObserver samlar ihop ändringar och bearbetar dem effektivt.
• Förbättra prestanda: Genom att erbjuda en deklarativ, händelsedriven mekanism eliminerar det behovet av dyr polling eller komplexa intersection observer-hack för storleksspårning.
• Möjliggör äkta responsivitet på komponentnivå: Komponenter kan bli verkligt medvetna om sitt tilldelade utrymme, vilket leder till mer modulära, återanvändbara och robusta UI-element.

Hur ResizeObserver fungerar: En praktisk djupdykning

Att använda ResizeObserver API innebär några enkla steg: instansiera en observatör, berätta vilka element den ska bevaka, och sedan hantera förändringarna i en callback-funktion.

Instansiering och observation

Först skapar du en ny instans av ResizeObserver och skickar med en callback-funktion som kommer att köras när ett bevakat elements storlek ändras.

            // Skapa en ny ResizeObserver-instans
const myObserver = new ResizeObserver(entries => {
  // Denna callback körs när det observerade elementets storlek ändras
  for (let entry of entries) {
    const targetElement = entry.target;
    const newWidth = entry.contentRect.width;
    const newHeight = entry.contentRect.height;

    console.log(`Element ${targetElement.id || targetElement.tagName} ändrade storlek till ${newWidth}px x ${newHeight}px.`);
    // Utför åtgärder baserat på den nya storleken
  }
});

            

              
                Copy
              
            
          

När du har en observatörsinstans kan du berätta för den vilka DOM-element den ska observera med metoden observe():

            // Hämta elementet du vill observera
const myElement = document.getElementById('myResizableDiv');

// Börja observera elementet
if (myElement) {
  myObserver.observe(myElement);
  console.log('Observation startad för myResizableDiv.');
} else {
  console.error('Element #myResizableDiv hittades inte.');
}

            

              
                Copy
              
            
          

Du kan observera flera element med samma observatörsinstans:

            const element1 = document.getElementById('chartContainer');
const element2 = document.querySelector('.responsive-sidebar');

if (element1) myObserver.observe(element1);
if (element2) myObserver.observe(element2);

            

              
                Copy
              
            
          

För att sluta observera ett specifikt element, använd unobserve():

            // Sluta observera ett enskilt element
if (myElement) {
  myObserver.unobserve(myElement);
  console.log('Observation stoppad för myResizableDiv.');
}

            

              
                Copy
              
            
          

För att sluta observera alla element och koppla bort observatören helt, använd disconnect():

            // Koppla bort observatören från alla observerade element
myObserver.disconnect();
console.log('ResizeObserver bortkopplad.');

            

              
                Copy
              
            
          

Callback-funktionen och ResizeObserverEntry

Callback-funktionen som skickas till ResizeObserver tar emot en array av ResizeObserverEntry-objekt. Varje post motsvarar ett element vars storlek har ändrats sedan den senaste notifieringen.

Ett ResizeObserverEntry-objekt ger viktig information om storleksändringen:

• target: En referens till DOM-elementet som har ändrat storlek.
• contentRect: Ett DOMRectReadOnly-objekt som representerar storleken på elementets content-box (området innanför padding och border). Detta är ofta den mest använda egenskapen för allmän innehållsstorlek.
• borderBoxSize: En array av ResizeObserverSize-objekt. Detta ger dimensionerna för elementets border-box, inklusive padding och border. Användbart när du behöver ta hänsyn till dessa i dina layoutberäkningar. Varje objekt i arrayen innehåller inlineSize och blockSize.
• contentBoxSize: En array av ResizeObserverSize-objekt, liknande borderBoxSize men representerar content-box. Detta anses vara mer modernt och exakt än contentRect för innehållsdimensioner, särskilt i flerkolumnslayouter eller när man hanterar skrivlägen.
• devicePixelContentBoxSize: En array av ResizeObserverSize-objekt som ger content-box-dimensionerna i enhetspixlar, användbart för pixelperfekt rendering, särskilt på skärmar med hög DPI.

Låt oss titta på ett exempel som använder dessa egenskaper:

            const detailedObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log(`--- Element med ny storlek: ${entry.target.id || entry.target.tagName} ---`);

    // Äldre contentRect (DOMRectReadOnly)
    console.log('ContentRect (äldre):');
    console.log(`  Bredd: ${entry.contentRect.width}px`);
    console.log(`  Höjd: ${entry.contentRect.height}px`);
    console.log(`  X: ${entry.contentRect.x}px`);
    console.log(`  Y: ${entry.contentRect.y}px`);

    // Modern contentBoxSize (array av ResizeObserverSize)
    if (entry.contentBoxSize && entry.contentBoxSize.length > 0) {
      const contentBox = entry.contentBoxSize[0];
      console.log('ContentBoxSize (modern):');
      console.log(`  Inline-storlek (bredd): ${contentBox.inlineSize}px`);
      console.log(`  Block-storlek (höjd): ${contentBox.blockSize}px`);
    }

    // BorderBoxSize (array av ResizeObserverSize)
    if (entry.borderBoxSize && entry.borderBoxSize.length > 0) {
      const borderBox = entry.borderBoxSize[0];
      console.log('BorderBoxSize:');
      console.log(`  Inline-storlek (bredd inkl. padding/border): ${borderBox.inlineSize}px`);
      console.log(`  Block-storlek (höjd inkl. padding/border): ${borderBox.blockSize}px`);
    }

    // DevicePixelContentBoxSize (array av ResizeObserverSize)
    if (entry.devicePixelContentBoxSize && entry.devicePixelContentBoxSize.length > 0) {
      const devicePixelBox = entry.devicePixelContentBoxSize[0];
      console.log('DevicePixelContentBoxSize:');
      console.log(`  Inline-storlek (enhetspixlar): ${devicePixelBox.inlineSize}px`);
      console.log(`  Block-storlek (enhetspixlar): ${devicePixelBox.blockSize}px`);
    }
  }
});

const observeMe = document.getElementById('observeThisDiv');
if (observeMe) {
  detailedObserver.observe(observeMe);
}

            

              
                Copy
              
            
          

En notering om contentRect vs. contentBoxSize: Även om contentRect har brett stöd och är intuitivt, är contentBoxSize och borderBoxSize nyare tillägg till specifikationen. De tillhandahåller en array av ResizeObserverSize-objekt eftersom ett element kan ha flera fragment om det är i en flerkolumnslayout. För de flesta vanliga scenarier med ett enda fragment kommer du att komma åt det första objektet i arrayen (t.ex. entry.contentBoxSize[0].inlineSize).

Verkliga användningsfall för hantering av responsiv layout

Tillämpningarna av ResizeObserver är otroligt varierande och gör det möjligt för utvecklare att bygga mer flexibla och motståndskraftiga användargränssnitt. Här är några övertygande verkliga scenarier:

Dynamiska diagram och datavisualiseringar

Diagrambibliotek (som Chart.js, D3.js, Highcharts, etc.) behöver ofta rita om eller justera sina skalor när deras behållare ändrar storlek. Traditionellt innebar detta att lyssna på window.resize och sedan manuellt kontrollera om diagrammets förälder hade ändrats. Med ResizeObserver kan diagram helt enkelt observera sin egen behållare och svara direkt.

Exempel: En instrumentpanel med flera diagram arrangerade i ett rutnät. När en användare ändrar storlek på en panel eller ändrar layouten, ritas varje diagram automatiskt om för att passa sina nya dimensioner perfekt, utan flimmer eller manuellt ingripande.

Adaptiva rutnätssystem och tabeller

Responsiva tabeller är notoriskt knepiga. Du kanske vill dölja vissa kolumner, omvandla en tabell till en listliknande struktur, eller justera kolumnbredder baserat på tillgängligt utrymme. Istället för att förlita sig på mediefrågor som gäller för hela visningsområdet, tillåter ResizeObserver en tabellkomponent att bestämma sin egen responsivitet baserat på sin egen bredd.

Exempel: En e-handels tabell med produktlistning. När dess behållare blir smal kan specifika kolumner som "produkt-ID" eller "lagernivå" döljas, och de återstående kolumnerna kan expandera för att fylla utrymmet. Om behållaren blir mycket smal kan tabellen till och med omvandlas till en kortbaserad layout.

Anpassade UI-komponenter och widgets

Många webbapplikationer har komplexa, återanvändbara UI-komponenter: sidomenyer, modaler, dragbara paneler eller inbäddade widgets. Dessa komponenter behöver ofta anpassa sin interna layout baserat på utrymmet som tilldelats dem av deras förälder. ResizeObserver gör detta själv-adaptiva beteende enkelt.

Exempel: En anpassad rich text-editorkomponent. Den kan visa en fullständig verktygsrad när den har gott om horisontellt utrymme, men automatiskt byta till en mer kompakt pop-over-meny för formateringsalternativ när dess behållare krymper. Ett annat exempel är en anpassad mediaspelare som justerar storleken och positioneringen av sina kontroller baserat på videons behållarstorlek.

Responsiv typografi och bildskalning

Utöver enkla visningsområdesbaserade justeringar kan ResizeObserver möjliggöra verkligt flytande typografi och bildhantering. Du kan dynamiskt justera teckenstorlekar, radhöjder eller bildkällor (t.ex. ladda en bild med högre upplösning för större behållare) baserat på den faktiska storleken på textblocket eller bildbehållaren, snarare än bara fönstret.

Exempel: Huvudinnehållsområdet i ett blogginlägg. Teckenstorleken på rubriker och stycken kan subtilt öka eller minska för att optimera läsbarheten inom den specifika bredden på innehållskolumnen, oberoende av sidomenyn eller sidfoten.

Tredjepartsinbäddningar och Iframes

Iframes är notoriskt svåra att göra responsiva, särskilt när deras innehåll behöver kommunicera sin önskade höjd till föräldrasidan. Även om postMessage kan användas är det ofta krångligt. För enklare scenarier där iframens förälder behöver reagera på iframens externa storleksändringar (t.ex. om iframen har en dynamisk höjd baserat på sitt interna innehåll), kan ResizeObserver meddela föräldraskalet.

Exempel: Inbäddning av ett tredjepartsformulär eller ett undersökningsverktyg. Om formuläret dynamiskt expanderar eller kollapsar sektioner, kan dess innehållande <div> på din sida lyssna på dessa storleksändringar via ResizeObserver och justera sin egen styling eller scrollbeteende därefter.

Beteende likt "Container Queries" idag

Innan inbyggda CSS Container Queries fick brett stöd var ResizeObserver det primära sättet att uppnå liknande logik i JavaScript. Utvecklare kunde observera ett elements storlek och sedan programmatiskt tillämpa CSS-klasser eller ändra stilar baserat på det elementets bredd- eller höjdtrösklar.

Exempel: En produktkortkomponent. Om dess bredd är mindre än 300px kan den stapla sin bild och text vertikalt. Om dess bredd är mellan 300px och 600px kan den placera dem sida vid sida. Över 600px kan den visa fler detaljer. ResizeObserver ger triggern för dessa villkorliga stiltillämpningar.

ResizeObserver vs. andra DOM-observationstekniker

Att förstå var ResizeObserver passar in i ekosystemet av DOM-API:er är avgörande. Det kompletterar, snarare än ersätter, andra observationstekniker.

window.resize: Fortfarande relevant för globala layouter

Som diskuterat är window.resize användbart för förändringar som påverkar hela visningsområdet, som att omarrangera stora layoutblock (t.ex. flytta en sidomeny till botten på mobilen). Det är dock ineffektivt och otillräckligt för justeringar på komponentnivå. Använd window.resize när du behöver reagera på den övergripande webbläsarfönsterstorleken; använd ResizeObserver för specifika elementdimensioner.

MutationObserver: För DOM-struktur och attributändringar

MutationObserver är utformad för att observera förändringar i själva DOM-trädet, som tillägg/borttagning av noder, ändringar i textinnehåll eller attributändringar. Det rapporterar inte direkt ändringar i elementstorlek. Även om en förändring i DOM-strukturen indirekt kan få ett element att ändra storlek, skulle MutationObserver inte berätta de nya dimensionerna direkt; du skulle behöva beräkna dem själv efter mutationen. För explicit storleksspårning är ResizeObserver det korrekta verktyget.

Polling (setInterval): Ett anti-mönster för storleksspårning

Innan ResizeObserver var en vanlig men ineffektiv metod att upprepade gånger kontrollera ett elements offsetWidth eller offsetHeight med setInterval. Detta är generellt ett anti-mönster eftersom:

• Det förbrukar CPU-cykler i onödan, även när ingen storleksändring har skett.
• Polling-intervallet är en avvägning: för ofta, och det är en prestandabov; för sällan, och UI:t reagerar trögt.
• Det utnyttjar inte webbläsarens optimerade renderingspipeline för layoutändringar.

ResizeObserver erbjuder ett deklarativt, prestandaeffektivt och webbläsaroptimerat alternativ.

element.getBoundingClientRect() / element.offsetWidth: Statiska mätningar

Metoder som getBoundingClientRect(), offsetWidth och offsetHeight ger omedelbara, statiska mätningar av ett elements storlek och position i det ögonblick de anropas. De är användbara för engångsmätningar men erbjuder ingen reaktivitet. Du skulle behöva anropa dem upprepade gånger (t.ex. inuti en window.resize-hanterare eller en polling-loop) för att upptäcka förändringar, vilket för oss tillbaka till de ineffektiviteter som ResizeObserver löser.

Bästa praxis och avancerade överväganden

Även om det är kraftfullt, kräver effektiv användning av ResizeObserver en förståelse för dess nyanser och potentiella fallgropar.

Undvika ResizeObserverLoopError

Ett vanligt misstag när man först använder ResizeObserver är att direkt ändra layoutegenskaperna (t.ex. bredd, höjd, padding, marginaler) för ett observerat element inom dess egen callback-funktion. Detta kan leda till en oändlig loop: en storleksändring upptäcks, callbacken ändrar elementets storlek, vilket utlöser en ny storleksändring, och så vidare. Webbläsaren kommer så småningom att kasta ett ResizeObserverLoopError för att förhindra att sidan blir oresponsiv.

Lösning: Skjut upp layoutändringar med requestAnimationFrame. För att säkert ändra det observerade elementets layout, skjut upp dessa ändringar till nästa animationsram. Detta gör att webbläsaren kan slutföra den aktuella layoutpasseringen innan du introducerar nya ändringar som kan utlösa en ny storleksändring.

            const saferObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    // Se till att vi inte direkt ändrar det observerade elementets storlek här
    // Om vi måste, måste vi skjuta upp det.

    const target = entry.target;
    const newWidth = entry.contentRect.width;

    // Exempel: Om vi justerade teckenstorleken på målet baserat på dess bredd
    // DÅLIGT: target.style.fontSize = `${newWidth / 20}px`; // Kan orsaka en loop

    // BRA: Skjut upp stiländringen
    requestAnimationFrame(() => {
      // Tillämpa endast ändringar om elementet fortfarande är anslutet till DOM
      // (viktigt om element kan tas bort under en animationsram)
      if (document.body.contains(target)) {
        target.style.fontSize = `${newWidth / 20}px`;
        console.log(`Justerade teckenstorlek för ${target.id || target.tagName} till ${target.style.fontSize}.`);
      }
    });
  }
});

const fontResizer = document.getElementById('fontResizerDiv');
if (fontResizer) {
  saferObserver.observe(fontResizer);
}

            

              
                Copy
              
            
          

Det är viktigt att notera att detta fel vanligtvis inträffar när du ändrar det observerade elementet självt. Att ändra ett underordnat element eller ett orelaterat element inom callbacken är generellt säkert, eftersom det inte kommer att utlösa en ny storleksändringshändelse på det ursprungligen observerade elementet.

Prestandakonsekvenser

ResizeObserver är utformad för att vara mycket prestandaeffektiv. Webbläsaren samlar ihop storleksnotifieringar, vilket innebär att callbacken endast anropas en gång per bildruta även om flera observerade element ändrar storlek eller ett enskilt element ändrar storlek flera gånger inom den bildrutan. Denna inbyggda "throttling" förhindrar överdriven exekvering av callbacken.

Du bör dock fortfarande vara medveten om arbetet som utförs inuti din callback:

• Dyrbara beräkningar: Undvik tunga DOM-manipulationer eller komplexa beräkningar inom callbacken om de inte är absolut nödvändiga.
• Många observatörer: Även om det är effektivt kan observation av ett mycket stort antal element (t.ex. hundratals eller tusentals) fortfarande ha en prestandakostnad, särskilt om varje callback utför betydande arbete.
• Tidiga avslut: Om en storleksändring inte motiverar en åtgärd, lägg till ett tidigt avslutsvillkor i din callback.

För åtgärder som är beräkningsmässigt dyra och inte behöver hända vid varje enskild storleksändringshändelse (t.ex. nätverksanrop, komplexa omritningar), överväg att använda "debounce" eller "throttle" på åtgärderna som utlöses av ResizeObserver-callbacken, snarare än själva callbacken. För de flesta UI-uppdateringar är dock den inbyggda "throttlingen" tillräcklig.

Tillgänglighetsaspekter

När du implementerar dynamiska layouter med ResizeObserver, tänk alltid på påverkan på tillgängligheten. Se till att layoutändringar:

• Är förutsägbara: Undvik plötsliga, desorienterande skiften i innehållet utan användarinitiering eller tydlig kontext.
• Bibehåller läsbarheten: Text ska förbli läsbar, och interaktiva element ska förbli tillgängliga, oavsett behållarens storlek.
• Stöder tangentbordsnavigering: Responsiva ändringar ska inte bryta tangentbordsfokusordningen eller göra element oåtkomliga.
• Erbjuder alternativ: För kritisk information eller funktionalitet, se till att det finns alternativa sätt att komma åt den om dynamisk storleksändring gör att den döljs eller blir mindre framträdande.

Webbläsarstöd och polyfills

ResizeObserver har utmärkt webbläsarstöd i alla moderna webbläsare, inklusive Chrome, Firefox, Edge, Safari och Opera. Detta gör det till ett pålitligt val för samtida webbutveckling.

För projekt som kräver kompatibilitet med äldre webbläsare (t.ex. Internet Explorer), kan en polyfill användas. Bibliotek som resize-observer-polyfill kan tillhandahålla den nödvändiga funktionaliteten, vilket gör att du kan använda API:et konsekvent över ett bredare spektrum av miljöer.

Du kan kontrollera den senaste kompatibilitetsstatusen på Can I use... ResizeObserver.

Arbeta med CSS-layouter (Flexbox, Grid, calc())

ResizeObserver fungerar sömlöst med moderna CSS-layouttekniker som Flexbox och Grid. När ett elements storlek ändras på grund av dess förälders flex- eller grid-layoutregler, kommer ResizeObserver korrekt att utlösa sin callback. Denna integration är kraftfull:

• CSS hanterar den primära layoutlogiken (t.ex. att objekt fördelar utrymme).
• JavaScript (via ResizeObserver) hanterar eventuella sekundära, innehållsspecifika justeringar som CSS ensamt inte kan hantera (t.ex. att rita om ett diagram, dynamiskt justera storleken på anpassade scrollbar-spår).

På samma sätt kommer element vars storlekar definieras med CSS-funktioner som calc() eller relativa enheter (em, rem, vw, vh, %) också att utlösa ResizeObserver när deras beräknade pixeldimensioner ändras. Detta säkerställer att API:et är reaktivt mot praktiskt taget alla mekanismer som påverkar ett elements renderade storlek.

Ett steg-för-steg-exempel: Skapa ett självjusterande textområde

Låt oss gå igenom ett praktiskt exempel: ett textområde som automatiskt justerar sin höjd för att passa sitt innehåll, och sedan reagerar ytterligare om dess föräldrabox ändrar storlek.

Målet är att skapa ett <textarea> som expanderar vertikalt när mer innehåll skrivs i det, men som också säkerställer att dess innehållande <div> kan påverka dess maximala tillgängliga höjd om behållaren själv ändrar storlek.

HTML-struktur

Vi kommer att sätta upp en enkel HTML-struktur med en föräldrabox och ett textområde inuti.

            <div class="container" id="textContainer">
  <h3>Justerbart innehållsområde</h3>
  <p>Skriv här och se textområdet anpassa sig.</p>
  <textarea id="autoResizeTextarea" placeholder="Börja skriva..."></textarea>
  <div class="resize-handle"></div>
</div>

            

              
                Copy
              
            
          

CSS-styling

Lite CSS för att göra det visuellt tydligt och tillåta att behållaren kan ändras manuellt i storlek (för demonstration).

            .container {
  width: 100%;
  max-width: 600px;
  min-width: 300px;
  min-height: 200px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 15px;
  margin: 20px auto;
  position: relative;
  /* Tillåt manuell storleksändring för demo */
  resize: both;
  overflow: auto;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
}

.container h3 {
  color: #333;
  margin-top: 0;
  margin-bottom: 10px;
}

.container p {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 15px;
}

#autoResizeTextarea {
  width: 100%;
  min-height: 50px;
  box-sizing: border-box; /* Inkludera padding/border i bredd/höjd */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1em;
  line-height: 1.5;
  font-family: sans-serif;
  overflow-y: hidden; /* Dölj scrollbar, vi hanterar höjden */
  resize: none; /* Inaktivera standardhandtaget för textområdet */
}

            

              
                Copy
              
            
          

JavaScript-implementering

Nu lägger vi till JavaScript för att göra textområdet dynamiskt justerbart.

            document.addEventListener('DOMContentLoaded', () => {
  const textarea = document.getElementById('autoResizeTextarea');
  const container = document.getElementById('textContainer');

  if (!textarea || !container) {
    console.error('Nödvändiga element hittades inte. Kontrollera HTML-ID:n.');
    return;
  }

  // Funktion för att justera textområdets höjd baserat på innehåll
  const adjustTextareaHeight = () => {
    // Återställ höjden för att beräkna scrollHeight korrekt
    textarea.style.height = 'auto';
    // Sätt höjden till scrollHeight, se till att det passar innehållet
    textarea.style.height = `${textarea.scrollHeight}px`;

    // VALFRITT: Begränsa textområdets höjd till dess föräldrabox innehållshöjd
    // Detta förhindrar att textområdet växer bortom det synliga behållarområdet.
    const containerContentHeight = container.clientHeight - 
                                  (parseFloat(getComputedStyle(container).paddingTop) || 0) - 
                                  (parseFloat(getComputedStyle(container).paddingBottom) || 0);

    const currentTextareaHeight = textarea.scrollHeight;
    const spaceAboveTextarea = textarea.offsetTop - container.offsetTop;
    const maxHeightAllowed = containerContentHeight - spaceAboveTextarea;

    if (currentTextareaHeight > maxHeightAllowed && maxHeightAllowed > 0) {
      textarea.style.height = `${maxHeightAllowed}px`;
      textarea.style.overflowY = 'auto'; // Återaktivera scroll om begränsad
    } else {
      textarea.style.overflowY = 'hidden'; // Dölj scroll om innehållet passar
    }
  };

  // 1. Lyssna på input-händelser på textområdet för att justera höjden när användaren skriver
  textarea.addEventListener('input', adjustTextareaHeight);

  // 2. Använd ResizeObserver för att reagera på behållarens storleksändringar
  const containerResizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
      if (entry.target === container) {
        console.log(`Behållaren ändrade storlek till: ${entry.contentRect.width}px x ${entry.contentRect.height}px`);
        // När behållaren ändrar storlek måste vi omvärdera textområdets höjd
        // särskilt om den begränsades av förälderns höjd.
        // Skjut upp detta för att undvika ResizeObserverLoopError om behållarens barn påverkar dess storlek.
        requestAnimationFrame(() => {
           if (document.body.contains(container)) {
              adjustTextareaHeight();
           }
        });
      }
    }
  });

  // Börja observera behållaren
  containerResizeObserver.observe(container);

  // Initial justering när sidan laddas
  adjustTextareaHeight();
});

            

              
                Copy
              
            
          

I detta exempel:

• Vi har ett textarea som expanderar sin höjd baserat på dess scrollHeight när användaren skriver.
• En ResizeObserver är kopplad till föräldraboxen (#textContainer).
• När behållaren ändras manuellt i storlek (med CSS-egenskapen resize: both;), utlöses observatörens callback.
• Inuti callbacken kör vi adjustTextareaHeight() igen. Detta säkerställer att om behållaren krymper, omvärderas textområdets höjdbegränsning, vilket potentiellt aktiverar dess scrollbar om innehållet inte längre passar.
• Vi använder requestAnimationFrame för anropet till adjustTextareaHeight() inuti observatörens callback för att förhindra potentiella ResizeObserverLoopError, särskilt om textområdets storlek på något sätt påverkade behållarens storlek i en mer komplex layout.

Detta demonstrerar hur ResizeObserver gör det möjligt för en komponent (textområdet) att vara verkligt responsiv inte bara mot sitt eget innehåll, utan också mot det dynamiska utrymme som tillhandahålls av dess förälder, vilket skapar en flytande och användarvänlig upplevelse.

Framtiden: ResizeObserver och inbyggda Container Queries

Med framväxten av inbyggda CSS Container Queries (t.ex. @container-regler), som får allt bredare webbläsarstöd, uppstår en vanlig fråga: Har ResizeObserver fortfarande en roll?

Svaret är ett rungande ja.

• Container Queries: Fokuserar primärt på CSS-driven styling baserad på en föräldrabox storlek. De låter dig tillämpa stilar (som att ändra display, font-size, grid-template-columns) direkt i CSS-regler utan JavaScript. Detta är idealiskt för rent presentationella och layoutrelaterade responsivitetsbehov.
• ResizeObserver: Utmärker sig när du behöver JavaScript för att reagera på storleksändringar. Detta inkluderar:
• Programmatiskt rita om en canvas (t.ex. diagram, spel).
• Justera komplex JavaScript-driven UI-logik (t.ex. ominitialisera ett tredjepartsbibliotek, beräkna nya positioner för dragbara element).
• Interagera med andra JavaScript-API:er baserat på storlek (t.ex. dynamiskt ladda olika bildstorlekar, styra videouppspelning).
• När du behöver exakta pixeldimensioner för beräkningar som CSS ensamt inte kan tillhandahålla eller utföra effektivt.

I grund och botten hanterar Container Queries den deklarativa stylingen, medan ResizeObserver hanterar den imperativa, programmatiska logiken. De är kompletterande verktyg som tillsammans skapar den ultimata verktygslådan för verkligt responsiva webbapplikationer.

Sammanfattning

ResizeObserver API är ett oumbärligt verktyg för moderna webbutvecklare som strävar efter att bygga verkligt dynamiska och responsiva användargränssnitt. Genom att erbjuda en effektiv, händelsedriven mekanism för att observera storleksändringar på vilket DOM-element som helst, tar det oss bortom begränsningarna med visningsområdescentrerad responsivitet och in i en värld av robust, anpassningsbarhet på komponentnivå.

Från att få datavisualiseringar att sömlöst anpassa sig till sina behållare till att möjliggöra självmedvetna UI-komponenter, ger ResizeObserver dig kraften att skapa mer motståndskraftiga, prestandaeffektiva och användarvänliga webbupplevelser. Omfamna detta kraftfulla API för att lyfta din front-end-utveckling, skapa layouter som elegant anpassar sig till varje sammanhang, och leverera exceptionella digitala produkter till en global publik.

Börja integrera ResizeObserver i dina projekt idag och lås upp en ny nivå av kontroll över dina responsiva webbdesigner!