Esiste un modo non di rilevamento per rilevare quando le dimensioni o la posizione di un elemento DOM sono cambiate?

Question

Per molto tempo, ho cercato un modo per rilevare quando le dimensioni o la posizione di un elemento DOM sono cambiate. Potrebbe essere perché la finestra è stata ridimensionata, o perché nuovi elementi figlio sono stati aggiunti all'elemento, o perché sono stati aggiunti nuovi elementi attorno a questo elemento, o perché le regole CSS sono cambiate, o perché l'utente ha cambiato la dimensione del carattere del browser. Ci sono un numero enorme di motivi per cui la dimensione o la posizione di un elemento cambierebbe.

Potrei collegare gestori di eventi per molti di questi eventi, ma penso che ci siano casi che non sono coperti. Speravo di usare MutationObservers solo per guardare l'offset dell'elementoWidth o clientWidth, ma sembra che questi si applichino solo agli attributi DOM, non alle proprietà dei nodi (o forse è proprio ciò che implementa Webkit). Quindi, per essere veramente a prova di proiettile, sembra che avrei bisogno di eseguire un ciclo di polling comunque.

È corretto? Ho perso qualcosa di importante? Il polling è l'unico modo a prova di proiettile per rilevare quando le dimensioni o la posizione di un elemento sono cambiate?

Modifica

Per dare un po 'più di contesto, questo non è legato ad alcun un particolare caso d'uso. Per me, è venuto fuori più e più volte. Nella mia situazione attuale, speravo di avere una tela che è impostata, tramite CSS, per essere al 100% larghezza e altezza del suo genitore. Voglio uno script per regolare le proprietà di larghezza e altezza del canvas quando è stato modificato il suo offsetWidth o clientWidth (questo è per WebGL, dove le proprietà width e height influiscono sulla risoluzione del framebuffer). In un altro progetto, volevo che un elemento si espandesse in altezza per riempire tutto lo spazio rimanente nella finestra del browser dell'utente. Mi sono imbattuto in questo momento e ora la situazione di nuovo e, inevitabilmente, la soluzione sembra essere:

1. Ascolta window.resize
2. Hook in qualsiasi codice che si scrive che potrebbe cambiare il DOM (o forse usare mutazione Eventi o osservatori mutazione)
3. Avere un'operazione di polling periodica per pulire eventuali casi mancati

(la maggior parte delle persone si fermano a 1, e magari fare un po 'di 2)

I volevo solo assicurarmi che non mi mancasse qualcosa di vitale.

Per inciso, nella mia situazione WebGL, ascoltare window.resize è sufficiente (ed è alquanto preferibile, perché quindi le dimensioni del canvas e la risoluzione di rendering cambiano nello stesso momento).

Answer 1

Un collaboratore mi ha indirizzato a un technique che utilizza gli eventi underflow e overflow. Non l'ho provato, e non ho idea di che tipo di supporto del browser ci sia (sembra Chrome e FireFox, e dovrebbe funzionare in IE sintetizzando gli stessi eventi che il browser dovrebbe cercare, ma non ho idea di quali versioni supporta la tecnica).

Answer 2

Si potrebbe fare con le animazioni CSS. Controlla http://developer.streak.com/2012/11/how-to-detect-dom-changes-in-css.html e simili. Suppongo che non gestirà tutte le tue richieste però, ora che ne leggo ancora un po '.