Istnieje dobry artykuł na temat MDN, który wyjaśnia teorię tych pojęć:
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
Wyjaśnia także ważne koncepcyjne różnice między szerokością / wysokością boundingClientRect a offsetWidth / offsetHeight.
Następnie, aby udowodnić, że teoria jest dobra lub zła, potrzebujesz testów. To właśnie zrobiłem tutaj: https://github.com/lingtalfi/dimensions-cheatsheet
Testuje pod kątem chrome53, ff49, safari9, edge13 i ie11.
Wyniki testów dowodzą, że teoria jest ogólnie słuszna. Do testów stworzyłem 3 div zawierające po 10 akapitów lorem ipsum. Zastosowano do nich trochę css:
.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);
}
A oto wyniki:
div1
- offsetWidth: 530 (chrome53, ff49, safari9, edge13, ie11)
- offsetHeight: 330 (chrome53, ff49, safari9, edge13, ie11)
- bcr. szerokość: 530 (chrome53, ff49, safari9, edge13, ie11)
bcr.height: 330 (chrome53, ff49, safari9, edge13, ie11)
clientWidth: 505 (chrome53, ff49, safari9)
- clientWidth: 508 (edge13)
- clientWidth: 503 (ie11)
clientHeight: 320 (chrome53, ff49, safari9, edge13, ie11)
scrollWidth: 505 (chrome53, safari9, ff49)
- scrollWidth: 508 (edge13)
- scrollWidth: 503 (ie11)
- scrollHeight: 916 (chrome53, safari9)
- scrollHeight: 954 (ff49)
- scrollHeight: 922 (edge13, ie11)
div2
- offsetWidth: 500 (chrome53, ff49, safari9, edge13, ie11)
- offsetHeight: 300 (chrome53, ff49, safari9, edge13, ie11)
- bcr. szerokość: 500 (chrome53, ff49, safari9, edge13, ie11)
- bcr.height: 300 (chrome53, ff49, safari9)
- bcr.height: 299.9999694824219 (edge13, ie11)
- clientWidth: 475 (chrome53, ff49, safari9)
- clientWidth: 478 (edge13)
- clientWidth: 473 (ie11)
clientHeight: 290 (chrome53, ff49, safari9, edge13, ie11)
scrollWidth: 475 (chrome53, safari9, ff49)
- scrollWidth: 478 (edge13)
- scrollWidth: 473 (ie11)
- scrollHeight: 916 (chrome53, safari9)
- scrollHeight: 954 (ff49)
- scrollHeight: 922 (edge13, ie11)
div3
- offsetWidth: 530 (chrome53, ff49, safari9, edge13, ie11)
- offsetHeight: 330 (chrome53, ff49, safari9, edge13, ie11)
- bcr. szerokość: 265 (chrome53, ff49, safari9, edge13, ie11)
- bcr.height: 165 (chrome53, ff49, safari9, edge13, ie11)
- clientWidth: 505 (chrome53, ff49, safari9)
- clientWidth: 508 (edge13)
- clientWidth: 503 (ie11)
clientHeight: 320 (chrome53, ff49, safari9, edge13, ie11)
scrollWidth: 505 (chrome53, safari9, ff49)
- scrollWidth: 508 (edge13)
- scrollWidth: 503 (ie11)
- scrollHeight: 916 (chrome53, safari9)
- scrollHeight: 954 (ff49)
- scrollHeight: 922 (edge13, ie11)
Tak więc, oprócz wartości wysokości boundingClientRect (299,9999694824219 zamiast oczekiwanych 300) w edge13 i ie11, wyniki potwierdzają, że teoria leżąca u podstaw tego działania działa.
Stamtąd oto moja definicja tych pojęć:
- offsetWidth / offsetHeight: wymiary ramki granicznej układu
- boundingClientRect: wymiary ramki renderowania
- clientWidth / clientHeight: wymiary widocznej części pola dopełnienia układu (bez pasków przewijania)
- scrollWidth / scrollHeight: wymiary pola dopełnienia układu, jeśli nie było ograniczone paskami przewijania
Uwaga: domyślna szerokość pionowego paska przewijania wynosi 12px w edge13, 15px w chrome53, ff49 i safari9 oraz 17px w ie11 (wykonane na podstawie pomiarów w Photoshopie ze zrzutów ekranu i potwierdzone bezpośrednio na podstawie wyników testów).
Jednak w niektórych przypadkach być może Twoja aplikacja nie używa domyślnej szerokości pionowego paska przewijania.
Biorąc pod uwagę definicje tych pojęć, szerokość pionowego paska przewijania powinna być równa (w pseudokodzie):
Uwaga: jeśli nie rozumiesz układu vs renderowania, przeczytaj artykuł mdn.
Ponadto, jeśli masz inną przeglądarkę (lub jeśli chcesz zobaczyć wyniki testów dla siebie), możesz zobaczyć moją stronę testową tutaj: http://codepen.io/lingtalfi/pen/BLdBdL
element.getBoundingClientRect()
(patrz uwaga na developer.mozilla.org/en-US/docs/Web/API/Element.clientWidth )