Що таке "Зсув" Висота, Клієнт Висота, ПрокруткаВисота?

Думка пояснити, в чому різниця між offsetHeight, clientHeightі scrollHeightабо offsetWidth, clientWidthі scrollWidth?

Треба знати цю різницю, перш ніж працювати на стороні клієнта. Інакше половина їхнього життя буде витрачена на виправлення інтерфейсу користувача.

Фіддл або інліній нижче:

function whatis(propType) {
  var mainDiv = document.getElementById("MainDIV");
  if (window.sampleDiv == null) {
    var div = document.createElement("div");
    window.sampleDiv = div;
  }
  div = window.sampleDiv;
  var propTypeWidth = propType.toLowerCase() + "Width";
  var propTypeHeight = propType + "Height";

  var computedStyle = window.getComputedStyle(mainDiv, null);
  var borderLeftWidth = computedStyle.getPropertyValue("border-left-width");
  var borderTopWidth = computedStyle.getPropertyValue("border-top-width");

  div.style.position = "absolute";
  div.style.left = mainDiv.offsetLeft + Math.round(parseFloat((propType == "client") ? borderLeftWidth : 0)) + "px";
  div.style.top = mainDiv.offsetTop + Math.round(parseFloat((propType == "client") ? borderTopWidth : 0)) + "px";
  div.style.height = mainDiv[propTypeHeight] + "px";
  div.style.lineHeight = mainDiv[propTypeHeight] + "px";
  div.style.width = mainDiv[propTypeWidth] + "px";
  div.style.textAlign = "center";
  div.innerHTML = propTypeWidth + " X " + propTypeHeight + "( " +
    mainDiv[propTypeWidth] + " x " + mainDiv[propTypeHeight] + " )";



  div.style.background = "rgba(0,0,255,0.5)";
  document.body.appendChild(div);

}
document.getElementById("offset").onclick = function() {
  whatis('offset');
}
document.getElementById("client").onclick = function() {
  whatis('client');
}
document.getElementById("scroll").onclick = function() {
  whatis('scroll');
}

#MainDIV {
  border: 5px solid red;
}

<button id="offset">offsetHeight & offsetWidth</button>
<button id="client">clientHeight & clientWidth</button>
<button id="scroll">scrollHeight & scrollWidth</button>

<div id="MainDIV" style="margin:auto; height:200px; width:400px; overflow:auto;">
  <div style="height:400px; width:500px; overflow:hidden;">

  </div>
</div>

Щоб знати різницю, ви повинні зрозуміти модель коробки , але в основному:

висота клієнта :

повертає внутрішню висоту елемента в пікселях, включаючи прокладку, але не горизонтальну висоту смуги прокрутки , межу або поле

зсув Висота :

є вимір , яке включає в себе елемент кордону , вертикальний відступ елемент, елемент горизонтальна смуги прокрутки (якщо він присутній, якщо воно винесено) і висота елемента CSS.

scrollHeight :

- це вимірювання висоти вмісту елемента, включаючи вміст, не видно на екрані через переповнення

Я полегшу:

Поміркуйте:

<element>                                     
    <!-- *content*: child nodes: -->        | content
    A child node as text node               | of
    <div id="another_child_node"></div>     | the
    ... and I am the 4th child node         | element
</element>                                    

scrollHeight : ENTIRE content & padding (visible or not)
_{висота всього вмісту + прокладки, незважаючи на висоту елемента.}

clientHeight : VISIBLE content & padding
_{Тільки видима висота: частина вмісту обмежена чітко визначеною висотою елемента.}

offsetHeight : VISIBLE content & padding + border + scrollbar
_{Висота, займана елементом документа.}

* offsetHeight - це вимірювання в пікселях висоти CSS елемента, включаючи рамку, прокладку та горизонтальну смугу прокрутки елемента.

* Властивість clientHeight повертає видиму висоту елемента в пікселях, включаючи прокладку, але не рамку, смугу прокрутки або поле.

* значення scrollHeight дорівнює мінімальній висоті, яку потребує елемент, щоб вмістити весь вміст у вікні перегляду, не використовуючи вертикальну смугу прокрутки. Висота вимірюється так само, як і клієнтська висота: вона включає прокладку елемента, але не його межу, поле або горизонтальну смугу прокрутки.

Те саме стосується всіх цих ширини замість висоти.

Мої описи для трьох:

• offsetHeight : Скільки батьківського простору "відносного позиціонування" займає елемент. (тобто він ігнорує position: absoluteнащадків елемента )
• clientHeight : Те саме, що і висота зміщення, за винятком того, що він виключає власну межу елемента, поле та висоту горизонтальної смуги прокрутки (якщо вона має).
• scrollHeight : скільки місця потрібно для того, щоб побачити весь вміст / нащадки елемента (у тому position: absoluteчислі) без прокрутки.

Тоді також є:

• getBoundingClientRect (). висота : Те саме, що і scrollHeight, за винятком того, що він обчислюється після застосування css-перетворень елемента .

Зсув означає "кількість або відстань, на яку щось перебуває поза лінією". Поля або Межі - це те, що робить фактичну висоту або ширину HTML-елемента "поза рядком". Це допоможе вам пам’ятати про це:

• offsetHeight - це вимірювання в пікселях висоти CSS елемента, включаючи рамку, прокладку та горизонтальну смугу прокрутки елемента.

З іншого боку, clientHeight - це те, про що можна сказати, протилежне OffsetHeight. Він не включає кордону або поля. Він включає в себе прокладку, тому що це щось, що знаходиться всередині контейнера HTML, тому воно не зараховується як додаткові вимірювання, як поле чи межа. Так :

• Властивість clientHeight повертає видиму висоту елемента в пікселях, включаючи прокладку, але не рамку, смугу прокрутки або поле.

ScrollHeight - це вся область, що прокручується, тому ваш прокрутка ніколи не буде перебігати ваші поля чи кордону, так що тому scrollHeight не включає поля чи межі, але так, як це робиться. Так:

• scrollHeightЗначення дорівнює мінімальній висоті, якої потрібен би елемент, щоб вмістити весь вміст у вікні перегляду без використання вертикальної смуги прокрутки. Висота вимірюється так само, як і клієнтська висота: вона включає прокладку елемента, але не його межу, поле або горизонтальну смугу прокрутки.