Es gibt mehrere Fragen zu StackOverflow in Bezug auf offsetWidth / clientWidth / scrollWidth (bzw. -Height), aber keine geben eine umfassende Erklärung für diese Werte.
Es gibt auch mehrere Quellen im Web, die verwirrende oder falsche Informationen enthalten.
Können Sie eine vollständige Erklärung mit einigen visuellen Hinweisen geben? Wie können diese Werte auch zur Berechnung der Breite der Bildlaufleisten verwendet werden?
Antworten:
Das CSS-Box-Modell ist ziemlich kompliziert, insbesondere wenn es um das Scrollen von Inhalten geht. Während der Browser die Werte aus Ihrem CSS zum Zeichnen von Feldern verwendet, ist das Bestimmen aller Dimensionen mit JS nicht einfach, wenn Sie nur über das CSS verfügen.
Das ist , warum jedes Element sechs DOM - Eigenschaften für Ihre Bequemlichkeit hat: offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidthund scrollHeight. Dies sind schreibgeschützte Attribute, die das aktuelle visuelle Layout darstellen, und alle sind Ganzzahlen (daher können Rundungsfehler auftreten).
Lassen Sie uns sie im Detail durchgehen:
offsetWidth, offsetHeight: Die Größe der visuellen Box mit allen Rändern. Kann durch Hinzufügen von width/ heightund Auffüllungen und Rahmen berechnet werden , wenn das Element hatdisplay: blockclientWidth, clientHeight: Der visuelle Teil des Boxinhalts, ohne Rahmen oder Bildlaufleisten, aber mit Auffüllung. Kann nicht direkt aus CSS berechnet werden, hängt von der Größe der Bildlaufleiste des Systems ab.scrollWidth, scrollHeight: Die Größe des gesamten Inhalts der Box, einschließlich der Teile, die derzeit außerhalb des Bildlaufbereichs verborgen sind. Kann nicht direkt aus CSS berechnet werden, hängt vom Inhalt ab.
Da offsetWidthdie Breite der Bildlaufleiste berücksichtigt wird, können wir damit die Breite der Bildlaufleiste über die Formel berechnen
scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidthLeider können Rundungsfehler auftreten, da offsetWidthund clientWidthimmer ganze Zahlen sind, während die tatsächlichen Größen mit anderen Zoomstufen als 1 gebrochen sein können.
Beachten Sie, dass dies
scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidthfunktioniert in Chrome nicht zuverlässig, da Chrome widthmit bereits abgezogener Bildlaufleiste zurückkehrt. (Außerdem rendert Chrome paddingBottom am unteren Rand des Bildlaufinhalts, während andere Browser dies nicht tun.)
naturalWidthund beziehennaturalHeight
scrollHeightenthält padding-bottom, scrollWidthaber nicht enthaltenpadding-right
clientWidthfür document.documentElement.clientWidthanders als es die gehören scheint padding, bordersundmargin
Ich habe eine umfassendere und übersichtlichere Version erstellt, die einige Leute möglicherweise nützlich finden, um sich daran zu erinnern, welcher Name welchem Wert entspricht. Ich habe den Farbcode von Chrome Dev Tool verwendet und die Beschriftungen sind symmetrisch angeordnet, um Analogien schneller zu erkennen:
Hinweis 1: clientLeftEnthält auch die Breite der vertikalen Bildlaufleiste, wenn die Richtung des Texts von rechts nach links eingestellt ist (da die Leiste in diesem Fall links angezeigt wird).
Hinweis 2: Die äußerste Linie repräsentiert das am nächsten positionierte übergeordnete Element (ein Element, dessen positionEigenschaft auf einen anderen Wert als
staticoder festgelegt ist initial). Wenn der direkte Container kein positioniertes
Element ist, repräsentiert die Linie nicht den ersten Container in der Hierarchie, sondern ein anderes Element höher in der Hierarchie. Wenn kein
positioniertes übergeordnetes
Element gefunden wird, verwendet der Browser das Element htmloder bodyals Referenz
Hoffe jemand findet es nützlich, nur meine 2 Cent;)
Wenn Sie scrollWidth verwenden möchten, um die "REAL" CONTENT WIDTH / HEIGHT (da der Inhalt größer sein kann als die CSS-definierte Breite / Höhe-Box) zu erhalten, ist die scrollWidth / Height sehr unzuverlässig, da einige Browser das PaddingRIGHT zu "bewegen" scheinen & paddingBOTTOM, wenn der Inhalt zu groß ist. Dann platzieren sie die Polster rechts / UNTEN des "zu breiten / hohen Inhalts" (siehe Bild unten).
==> Um in einigen Browsern die REAL CONTENT WIDTH zu erhalten, müssen Sie BEIDE Auffüllungen von der Bildlaufbreite abziehen, und in einigen Browsern müssen Sie nur die LEFT Padding abziehen.
Ich habe eine Lösung dafür gefunden und wollte diese als Kommentar hinzufügen, war aber nicht erlaubt. Also habe ich das Bild gemacht und es in Bezug auf die "bewegten Polster" und die "unzuverlässige Scrollbreite" etwas klarer gemacht. Im BLAUEN BEREICH finden Sie meine Lösung, wie Sie die "ECHTE" INHALTSBREITE erhalten!
Hoffe, das hilft, die Dinge noch klarer zu machen!
Es gibt einen guten Artikel über MDN, der die Theorie hinter diesen Konzepten erklärt: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
Außerdem werden die wichtigen konzeptionellen Unterschiede zwischen der Breite / Höhe von boundingClientRect und der OffsetWidth / OffsetHeight erläutert.
Um die Theorie richtig oder falsch zu beweisen, benötigen Sie einige Tests. Das habe ich hier gemacht: https://github.com/lingtalfi/dimensions-cheatsheet
Es wird auf Chrome53, ff49, Safari9, Edge13 und IE11 getestet.
Die Ergebnisse der Tests beweisen, dass die Theorie im Allgemeinen richtig ist. Für die Tests habe ich 3 Divs erstellt, die jeweils 10 Lorem-Ipsum-Absätze enthalten. Einige CSS wurde auf sie angewendet:
.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);
}Und hier sind die Ergebnisse:
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)
Abgesehen von dem Höhenwert von boundingClientRect (299.9999694824219 anstelle von erwarteten 300) in edge13 und ie11 bestätigen die Ergebnisse, dass die dahinter stehende Theorie funktioniert.
Von dort aus ist hier meine Definition dieser Konzepte:
Hinweis: Die Standardbreite der vertikalen Bildlaufleiste beträgt 12px in edge13, 15px in chrome53, ff49 und safari9 und 17px in ie11 (durchgeführt durch Messungen in Photoshop anhand von Screenshots und durch die Testergebnisse bestätigt).
In einigen Fällen verwendet Ihre App jedoch möglicherweise nicht die Standardbreite der vertikalen Bildlaufleiste.
Angesichts der Definitionen dieser Konzepte sollte die Breite der vertikalen Bildlaufleiste also gleich sein (im Pseudocode):
Layoutdimension: offsetWidth - clientWidth - (borderLeftWidth + borderRightWidth)
Rendering-Dimension: boundingClientRect.width - clientWidth - (borderLeftWidth + borderRightWidth)
Hinweis: Wenn Sie Layout und Rendering nicht verstehen, lesen Sie bitte den MDN-Artikel.
Wenn Sie einen anderen Browser haben (oder die Ergebnisse der Tests selbst sehen möchten), können Sie meine Testseite hier sehen: http://codepen.io/lingtalfi/pen/BLdBdL
element.getBoundingClientRect()(siehe Hinweis unter developer.mozilla.org/en-US/docs/Web/API/Element.clientWidth )