Utilizzare le JavaScript Resize Observer API per rispondere ai cambiamenti di dimensione di un oggetto HTML

di Stefano Mostarda, in HTML5, JavaScript,

L'avvento dei dispositivi mobili con diversi form factor come smartphone e tablet ha obbligato il mondo del web a dotarsi di strumenti per visualizzare correttamente le pagine su ogni device. Tra questi strumenti, le media query rivestono un ruolo fondamentale in quanto permettono di specificare stili CSS in base alle dimensioni e alle capacità del device.
Sebbene le media query siano molto potenti, esistono casi in cui bisogna reagire non tanto al cambiamento delle dimensioni del browser, ma al cambiamento delle dimensioni di un singolo oggetto. Ad esempio, se diamo la possibilità all'utente di cambiare le dimensioni del font, automaticamente cambiano anche le dimensioni del suo contenitore e potremmo dover reagire a questo cambio adattando le dimensioni di altri oggetti o nascondendoli o altro ancora.

In questi casi l'evento resize dell'oggetto window non può aiutarci in quanto non viene scatenato. Tuttavia possiamo ricorrere all'utilizzo delle Resize Observer API che ci permettono di sottoscriverci al cambiamento di dimensioni di uno o più oggetti.

const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    // codice
  }
});

resizeObserver.observe(document.querySelector('#mydiv'));

Come si vede dal codice, la classe ResizeObserver accetta in input nel costruttore un callback che viene invocato quando un oggetto viene ridimensionato dal browser. Successivamente, viene chiamato il metodo observe al quale viene passata la lista di oggetti di cui osservare le dimensioni.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi