Esistono diverse domande su StackOverflow per quanto riguarda offsetWidth / clientWidth / scrollWidth (e -Height, rispettivamente), ma nessuna fornisce una spiegazione completa di quali siano questi valori.
Inoltre, ci sono diverse fonti sul web che forniscono informazioni confuse o errate.
Puoi dare una spiegazione completa includendo alcuni suggerimenti visivi? Inoltre, come si possono usare questi valori per calcolare la larghezza della barra di scorrimento?
Risposte:
Il modello di box CSS è piuttosto complicato, in particolare quando si tratta di scorrere i contenuti. Mentre il browser utilizza i valori del CSS per disegnare caselle, determinare tutte le dimensioni utilizzando JS non è semplice se si dispone solo del CSS.
Ecco perché ogni elemento è dotato di sei proprietà DOM per la vostra convenienza: offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidthe scrollHeight. Questi sono attributi di sola lettura che rappresentano il layout visivo corrente e tutti sono numeri interi (quindi possibilmente soggetti a errori di arrotondamento).
Analizziamoli in dettaglio:
offsetWidth, offsetHeight: La dimensione della casella visiva che include tutti i bordi. Può essere calcolato aggiungendo width/ heighte padding e bordi, se l'elemento hadisplay: blockclientWidth, clientHeight: La parte visiva del contenuto della casella, esclusi i bordi o le barre di scorrimento, ma include il riempimento. Non può essere calcolato direttamente dal CSS, dipende dalla dimensione della barra di scorrimento del sistema.scrollWidth, scrollHeight: La dimensione di tutto il contenuto della scatola, comprese le parti che sono attualmente nascoste al di fuori dell'area di scorrimento. Non può essere calcolato direttamente dal CSS, dipende dal contenuto.
Poiché offsetWidthtiene conto della larghezza della barra di scorrimento, possiamo usarla per calcolare la larghezza della barra di scorrimento tramite la formula
scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidthSfortunatamente, potremmo avere errori di arrotondamento, poiché offsetWidthe clientWidthsono sempre numeri interi, mentre le dimensioni effettive potrebbero essere frazionarie con livelli di zoom diversi da 1.
Si noti che questo
scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidthnon non funzionare in modo affidabile in Chrome, dal momento che i rendimenti Chrome widthcon barra di scorrimento già sottratto. (Inoltre, Chrome esegue il rendering del paddingBottom nella parte inferiore del contenuto dello scorrimento, mentre altri browser no)
naturalWidthenaturalHeight
scrollHeightinclude padding-bottomma scrollWidthnon includepadding-right
clientWidthper document.documentElement.clientWidthè diverso come sembra includere il padding, bordersemargin
Ho creato una versione più completa e più pulita che alcune persone potrebbero trovare utili per ricordare quale nome corrisponde a quale valore. Ho usato il codice colore di Chrome Dev Tool e le etichette sono organizzate simmetricamente per raccogliere le analogie più velocemente:
Nota 1: clientLeftinclude anche la larghezza della barra di scorrimento verticale se la direzione del testo è impostata da destra a sinistra (poiché in questo caso la barra viene visualizzata a sinistra)
Nota 2: la linea più esterna rappresenta il genitore posizionato più vicino (un elemento la cui positionproprietà è impostata su un valore diverso da
statico initial). Pertanto, se il contenitore diretto non è un
elemento posizionato , la linea non rappresenta il primo contenitore nella gerarchia ma un altro elemento più in alto nella gerarchia. Se non viene trovato alcun
genitore posizionato , il browser prenderà l'
elemento htmlo bodycome riferimento
Spero che qualcuno lo trovi utile, solo i miei 2 centesimi;)
Se si desidera utilizzare scrollWidth per ottenere LARGHEZZA / ALTEZZA DEL CONTENUTO "REALE" (poiché il contenuto può essere più GRANDE della larghezza / altezza-box definiti dal css), scrollWidth / Height è molto INREDIBILE poiché alcuni browser sembrano "SPOSTARE" il paddingRIGHT & paddingBOTTOM se il contenuto è troppo grande. Quindi posizionano le imbottiture sul lato DESTRO / INFERIORE del "contenuto troppo ampio / alto" (vedi immagine sotto).
==> Pertanto, per ottenere la LARGHEZZA DEI CONTENUTI REALI in alcuni browser è necessario sottrarre ENTRAMBI i padding dalla larghezza di scorrimento e in alcuni browser è necessario sottrarre solo il padding LEFT.
Ho trovato una soluzione per questo e volevo aggiungerlo come commento, ma non mi è stato permesso. Così ho scattato la foto e l'ho resa un po 'più chiara per quanto riguarda i "padding spostati" e la "scrollWidth inaffidabile". Nell'AREA BLU trovi la mia soluzione su come ottenere la LARGHEZZA DEI CONTENUTI "REALI"!
Spero che questo aiuti a rendere le cose ancora più chiare!
C'è un buon articolo su MDN che spiega la teoria alla base di questi concetti: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
Spiega anche le importanti differenze concettuali tra larghezza / altezza di boundingClientRect rispetto a offsetWidth / offsetHeight.
Quindi, per dimostrare la teoria giusta o sbagliata, hai bisogno di alcuni test. Questo è quello che ho fatto qui: https://github.com/lingtalfi/dimensions-cheatsheet
È in fase di test per chrome53, ff49, safari9, edge13 e ie11.
I risultati dei test dimostrano che la teoria è generalmente corretta. Per i test, ho creato 3 div contenenti 10 paragrafi di lorem ipsum ciascuno. Alcuni CSS sono stati applicati a loro:
.div1{
width: 500px;
height: 300px;
padding: 10px;
border: 5px solid black;
overflow: auto;
}
.div2{
width: 500px;
height: 300px;
padding: 10px;
border: 5px solid black;
box-sizing: border-box;
overflow: auto;
}
.div3{
width: 500px;
height: 300px;
padding: 10px;
border: 5px solid black;
overflow: auto;
transform: scale(0.5);
}
E qui ci sono i risultati:
div1
bcr.height: 330 (chrome53, ff49, safari9, edge13, ie11)
clientWidth: 505 (chrome53, ff49, safari9)
clientHeight: 320 (chrome53, ff49, safari9, edge13, ie11)
scrollWidth: 505 (chrome53, safari9, ff49)
div2
clientHeight: 290 (chrome53, ff49, safari9, edge13, ie11)
scrollWidth: 475 (chrome53, safari9, ff49)
div3
clientHeight: 320 (chrome53, ff49, safari9, edge13, ie11)
scrollWidth: 505 (chrome53, safari9, ff49)
Quindi, a parte il valore di altezza di boundingClientRect (299.9999694824219 invece di 300 previsti) in edge13 e ie11, i risultati confermano che la teoria alla base di questo funziona.
Da lì, ecco la mia definizione di quei concetti:
Nota: la larghezza della barra di scorrimento verticale predefinita è 12px in edge13, 15px in chrome53, ff49 e safari9 e 17px in ie11 (eseguita dalle misurazioni in Photoshop da schermate e dimostrata dai risultati dei test).
Tuttavia, in alcuni casi, forse l'app non utilizza la larghezza della barra di scorrimento verticale predefinita.
Quindi, date le definizioni di quei concetti, la larghezza della barra di scorrimento verticale dovrebbe essere uguale (in pseudo codice):
dimensione layout: offsetWidth - clientWidth - (borderLeftWidth + borderRightWidth)
dimensione di rendering: boundingClientRect.width - clientWidth - (borderLeftWidth + borderRightWidth)
Nota, se non capisci il layout rispetto al rendering, leggi l'articolo mdn.
Inoltre, se hai un altro browser (o se vuoi vedere tu stesso i risultati dei test), puoi vedere la mia pagina di test qui: http://codepen.io/lingtalfi/pen/BLdBdL
element.getBoundingClientRect()(vedere la nota su developer.mozilla.org/en-US/docs/Web/API/Element.clientWidth )