Понимание offsetWidth, clientWidth, scrollWidth и-Height, соответственно

Если вы хотите использовать ширину прокрутки, чтобы получить "Реал" ШИРИНА/ВЫСОТА СОДЕРЖИМОГО (поскольку содержимое может быть больше, чем CSS-определенная ширина / высота-Box)ширина прокрутки / Высота очень ненадежна поскольку некоторые браузеры, похоже," перемещают " paddingRIGHT & paddingBOTTOM, если контент большой. Затем они помещают прокладки справа / внизу "слишком широкого / высокого содержания" (см. рисунок ниже).

==> поэтому, чтобы получить реальный контент Ширина в некоторых браузерах вы должны вычесть оба заполнения из ширины прокрутки, а в некоторых браузерах вам нужно вычесть только левое заполнение.

Я нашел решение для этого и хотел добавить это в качестве комментария, но не разрешили. Поэтому я сделал снимок и сделал его немного более ясным в отношении "перемещенных прокладок" и "ненадежной ширины прокрутки". в синей области вы найдете мое решение о том, как получить "реальную" ширину контента!

надеюсь, это поможет сделать вещи еще яснее!

Я создал более полную и чистую версию, что некоторые люди могут найти полезным для запоминания того, какое имя соответствует какому значению. Я использовал цветовой код Chrome Dev Tool и метки организованы симметрично, чтобы быстрее подобрать аналогии:

• Примечание 1: clientLeft также включает в себя ширину вертикальной прокрутки если направление текста справа-налево (с бар отображается слева в окне тот случай)

• примечание 2: самая внешняя линия представляет ближайший расположенный родитель (элемент которого position свойство имеет значение, отличное от static или initial). Таким образом, если прямой контейнер не расположенный элемент, то строка не представляет первый контейнер в иерархии, но другой элемент выше в иерархии. Если нет расположенный родитель найден, браузер примет html или body элемент, как ссылка

---

надеюсь, кто-то найдет его полезным, только мои 2 цента ;)

есть хорошая статья о MDN, которая объясняет теорию этих понятий: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

Это также объясняет важные концептуальные различия между шириной/высотой boundingClientRect и offsetWidth / offsetHeight.

затем, чтобы доказать правильность или неправильность теории, вам нужны некоторые тесты. Вот что я сделал здесь: https://github.com/lingtalfi/dimensions-cheatsheet

это тестирование для chrome53, ff49, safari9, edge13 и ie11.

результаты тестов доказывают, что теория в целом правильно. Для тестов я создал 3 divs, содержащих по 10 абзацев lorem ipsum каждый. К ним был применен некоторый 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);
}

и вот результаты:

• div1

  • offsetWidth: 530 (chrome53, ff49, safari9, edge13, ie11)
  • offsetHeight: 330 (chrome53, ff49, safari9, edge13, ie11)
  • bcr.ширина: 530 (chrome53, ff49, safari9, edge13, ie11)

  • bcr.высота: 330 (chrome53, ff49, safari9, edge13, ie11)

  • clientWidth: 505 (chrome53, ff49, safari9)

  • clientWidth: 508 (edge13)
  • clientWidth: 503 (ie11)

  • clientHeight: 320 (chrome53, ff49, safari9, edge13, ie11)

  • ширина прокрутки: 505 (chrome53, safari9, ff49)

  • scrollWidth: 508 (edge13)
  • ширина прокрутки: 503 (ie11)
  • scrollHeight: 916 (chrome53, safari9)
  • scrollHeight: 954 (ff49)
  • scrollHeight: 922 (edge13, ie11)

• раздел 2

  • offsetWidth: 500 (chrome53, ff49, safari9, edge13, ie11)
  • offsetHeight: 300 (chrome53, ff49, safari9, edge13, ie11)
  • bcr.ширина: 500 (chrome53, ff49, safari9, edge13, ie11)
  • bcr.высота: 300 (chrome53, ff49, safari9)
  • bcr.высота: 299.9999694824219 (edge13, ie11)
  • clientWidth: 475 (chrome53, ff49, safari9)
  • clientWidth: 478 (edge13)
  • clientWidth: 473 (ie11)

  • clientHeight: 290 (chrome53, ff49, safari9, edge13, ie11)

  • ширина прокрутки: 475 (chrome53, safari9, ff49)

  • scrollWidth: 478 (edge13)
  • ширина прокрутки: 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.ширина: 265 (chrome53, ff49, safari9, edge13, ie11)
  • bcr.рост: 165 (chrome53, ff49, safari9, edge13, ie11)
  • clientWidth: 505 (chrome53, ff49, safari9)
  • clientWidth: 508 (edge13)
  • clientWidth: 503 (ie11)

  • clientHeight: 320 (chrome53, ff49, safari9, edge13, ie11)

  • ширина прокрутки: 505 (chrome53, safari9, ff49)

  • scrollWidth: 508 (edge13)
  • ширина прокрутки: 503 (ie11)
  • scrollHeight: 916 (chrome53, safari9)
  • scrollHeight: 954 (ff49)
  • scrollHeight: 922 (edge13, ie11)

Итак, помимо значения высоты boundingClientRect (299.9999694824219 вместо ожидаемых 300) в edge13 и ie11, результаты подтверждают, что теория, стоящая за этим, работает.

оттуда, вот мое определение этих понятий:

• offsetWidth/offsetHeight: размеры поля границы макета
• boundingClientRect: размеры поля границы рендеринга
• clientWidth/clientHeight: размеры видимой части поля заполнения макета (за исключением полос прокрутки)
• scrollWidth/scrollHeight: размеры поля заполнения макета, если оно не было ограничено полосами прокрутки

примечание: по умолчанию ширина вертикальной полосы прокрутки составляет 12px в edge13, 15px в chrome53, ff49 и safari9 и 17px в ie11 (сделано по измерениям в photoshop со скриншотов и доказано по результатам тестов).

однако в некоторых случаях, возможно, ваше приложение не использует ширину вертикальной полосы прокрутки по умолчанию.

Так, даны определения этих понятий, ширина вертикальной полосы прокрутки должна быть равна (в псевдо-код):

• размер макета: offsetWidth-clientWidth - (borderLeftWidth + borderRightWidth)

• размер визуализации: boundingClientRect.width-clientWidth - (borderLeftWidth + borderRightWidth)

Примечание, Если вы не понимаете макет против рендеринга, пожалуйста, прочитайте статью mdn.

также, если у вас есть другой браузер (или если вы хотите увидеть результаты тестов на себе), вы можете увидеть мою тестовую страницу здесь: http://codepen.io/lingtalfi/pen/BLdBdL