В чем разница между offsetHeight и scrollHeight элемента в DOM?

В DOM, в чем разница между элементами offsetHeight и его scrollHeight? Изображение в объяснении было бы большой помощью.

Ответы

Ответ 1

HTMLElement.offsetHeight - это измерение, которое включает в себя границы элементов, вертикальное заполнение элемента, горизонтальную полосу прокрутки элемента (если она присутствует, если визуализирована) и высота элемента CSS. HTMLElement.scrollHeight - это измерение высоты содержимого элемента, включая контент, невидимый на экране из-за переполнения. Значение, возвращаемое HTMLElement.scrollHeight WILL, включает верхнюю и нижнюю части дополнения, но не будет включать границы элементов или горизонтальную полосу прокрутки элемента.

Эта страница и эта страница являются моими источниками.

Документация MDN также предоставляет изображения для демонстрации.

Ответ 2

Как сказал @Csarsam, высота смещения - это высота рамки (я переписываю). Высота прокрутки - это высота прокручиваемого содержимого, которое обычно состоит из нескольких элементов. Но высота прокрутки также определяется на элементах, которые не прокручиваются, следовательно, не имеет прокручиваемого содержимого, и в этом случае (Ive проверен, но у меня нет ссылки на его резервное копирование) высота прокрутки - это ее высота содержимого, то есть включают поля и границы. Но когда элемент является частью прокручиваемого содержимого, его маржа учитывается для вычисления высоты прокрутки родительского элемента.

Высота прокрутки определяется как прокручиваемым контентом, так и прокручиваемым контентом, что может смутить.

Update

Вот ссылка, которая подтверждает, что проверял Ive: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight