Comprendre offsetWidth, clientWidth, scrollWidth et -Height, respectivement

Question

Il y a plusieurs questions sur StackOverflow concernant offsetWidth / clientWidth / scrollWidth (et -Height, respectivement), mais aucune ne donne une explication complète de ces valeurs.

En outre, il existe plusieurs sources sur le Web donnant des informations confuses ou incorrectes.

Pouvez-vous donner une explication complète incluant quelques conseils visuels? De même, comment ces valeurs peuvent-elles être utilisées pour calculer les largeurs de barre de défilement?

Answer 1

Le modèle de boîte CSS est plutôt compliqué, surtout quand il s'agit de défilement de contenu. Alors que le navigateur utilise les valeurs de votre CSS pour dessiner des boîtes, la détermination de toutes les dimensions à l'aide de JS n'est pas simple si vous avez seulement le CSS.

C'est pourquoi chaque élément a six propriétés DOM pour votre confort: offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth et scrollHeight. Ce sont les attributs en lecture seule qui représente l'état actuel visuelle, mise en page, et tous sont des entiers (donc éventuellement sous réserve d'erreurs d'arrondi).

Nous allons passer en revue dans le détail:

• offsetWidth, offsetHeight: La taille du visuel de la boîte, dont toutes les frontières. Peut être calculé en ajoutant width/height et les rembourrages et les frontières, si l'élément a display: block
• clientWidth, clientHeight: Le visual partie de la zone de contenu, pas y compris les bordures ou les barres de défilement. Ne peut pas être calculée directement à partir de CSS, dépend du système de la barre de défilement de la taille.
• scrollWidth, scrollHeight: La taille de l'ensemble de la zone de contenu, y compris les parties qui sont actuellement cachés à l'extérieur de la zone de défilement. Ne peut pas être calculée directement à partir de CSS, dépend du contenu.

Essayez: jsFiddle

---

Depuis clientWidth prend la barre de défilement de la largeur de compte, nous pouvons l'utiliser pour calculer la barre de défilement de la largeur par la formule

scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth

Malheureusement, on peut obtenir des erreurs d'arrondi, depuis offsetWidth et clientWidth sont toujours des nombres entiers, alors que la taille réelle peut être fractionnaire avec des niveaux de zoom autre que 1.

Notez que cette

scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidth

ne pas fonctionner de manière fiable dans Chrome, depuis Chrome retours width avec barre de défilement déjà soustraite. (Aussi, le Chrome rend paddingBottom vers le bas de la faire défiler le contenu, tandis que les autres navigateurs ne le font pas)