Почему offsetWidth вычисляет ширину HTML без учета полосы прокрутки?

Всем привет!

В песочнице jsbin.com прописал следующий HTML-код:
<!DOCTYPE html>
<html>
<head>
<style>
  html {
    overflow: scroll;
  }
</style>
</head>
<body>
<script>
console.log(window.innerWidth)
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.offsetWidth)
</script>
</body>
</html>

Ширину эмулятора окна браузера в песочнице установил на 420px. В стилях для HTML добавил полосу прокрутки для эксперимента. И, собственно, по результатам этого эксперимента и хочу задать вопрос.

В консоли получил три значения:
1) 420: здесь все отлично. Я выставил ширину окна на 420px и при использовании innerWidth для получил ожидаемый результат: 420, так как innerWidth учитывает ширину внутреннего содержимого + ширину полосы прокрутки.

2) 403: для clientWidth получил также ожидаемый результат: 420 - ширина прокрутки (17px), получаем 403

3) А вот с третьим значением возник вопрос: почему 403? offsetWidth должен считать ширину элемента целиком, включая полосу прокрутки, т.е. выдавать результат 420, а не 403.

Почему 403, а не 420?

P.S. С тегом BODY ситуация аналогичная.
  • Вопрос задан
  • 197 просмотров
Решения вопроса 1
dedavarera
@dedavarera Автор вопроса
Зарубежные друзья помогли разобраться в вопросе:
https://stackoverflow.com/questions/68544990/why-d...

Итог: свойство offsetWidth возвращает ширину элемента вместе с шириной полосы прокрутки (если она имеется) для всех элементов (даже для body), кроме document.documentElement.

Более того, в процессе поиска ответа на вопрос наткнулся еще на одну интересную деталь уже для свойства clientWidth: данное свойство предлагается использовать на document.documentElement в качестве «линейки» для измерения видимой ширины документа (видимой области содержимого) в том числе на популярном обучающем ресурсе.

Однако хотелось бы акцентировать внимание на том, что clientWidth на document.documentElement — это особый случай, возвращающий именно ширину видимой области содержимого. Если мы установим для document.documentElement свойство width = 180px (или 300px, 400px, 600px — неважно), а затем проверим document.documentElement.clientWidth, то не увидим установленного значения в 180px, а увидим ширину видимой области содержимого (за исключением ширины полосы прокрутки, если она имеется). Свойство offsetWidth в этом случае покажет другое, правильное значение: 180px + внутренние отступы + границы (не включая, как мы уже выяснили, ширину полосы прокрутки, если таковая имеется).
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы