Nel DOM, qual è la differenza tra lo offsetHeight
di un elemento e il suo scrollHeight
? Un'immagine nella spiegazione sarebbe di grande aiuto.Qual è la differenza tra offsetHeight e scrollHeight di un elemento in DOM?
risposta
HTMLElement.offsetHeight
è una misurazione che include i bordi dell'elemento, il riempimento verticale dell'elemento, la barra di scorrimento orizzontale dell'elemento (se presente, se renderizzata) e l'altezza CSS dell'elemento. HTMLElement.scrollHeight
è una misura dell'altezza del contenuto di un elemento incluso il contenuto non visibile sullo schermo a causa di un eccesso. Il valore restituito da HTMLElement.scrollHeight
includerà il padding-top e il padding-bottom, ma NON includerà i bordi dell'elemento o la barra di scorrimento orizzontale dell'elemento.
This pagina e this pagina sono le mie fonti.
La documentazione MDN fornisce anche immagini da dimostrare.
Come ha detto @Csarsam, l'altezza di offset è l'altezza del riquadro di confine (sto riformulando). Scorri l'altezza, è l'altezza del contenuto scorrevole, che è generalmente composto da più elementi. Ma l'altezza di scorrimento è anche definito su elementi che non scorre, quindi non ha un contenuto scorrevole, nel qual caso (ho controllato ma non ho alcun riferimento una copia di backup) altezza di scorrimento è la sua altezza di contenuti, cioè, non include i margini e i bordi. Ma quando l'elemento fa parte di un contenuto scorrevole, il suo margine viene preso in considerazione per calcolare l'altezza di scorrimento del suo genitore.
altezza di scorrimento è definita sia contenuto scorrevole e contenuto non scorrevole, questo è ciò che può confondere.
Aggiornamento
Qui è un riferimento che conferma quello che ho controllato: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
Eccellente risposta è qui ... http://stackoverflow.com/questions/4106538/difference-between-offsetheight- and-clientheight –
In realtà @HumanBeing si tratta di una diversa coppia di elementi. – Dave