Способы получения высоты всего документа в JavaScript
Быстрый ответ
Для того чтобы узнать полную высоту документа в JavaScript, используйте свойство document.documentElement.scrollHeight
. Этот метод применим во всех современных браузерах и позволяет учеть даже те части содержимого, которые текущий экран не отображает:
const totalHeight = document.documentElement.scrollHeight;
// Готовы? Мы определяем высоту цифровой вселенной!
Детализация: Тонкая настройка измерений высоты
Свойство scrollHeight
обычно предоставляет точные данные, но важно помнить о некоторых нюансах. Например, при работе со стилями CSS, offsetHeight
будет включать padding, scroll и границы элемента, в отличие от scrollHeight
.
Если требуется более высокая точность, полезно учитывать отступы элемента:
const accurateHeight = document.documentElement.getBoundingClientRect().height;
// Так мы определяем высоту документа с точностью до пикселя!
Динамическое содержимое: Обработка событий изменения размера и загрузки
Если на вашей странице используется iframe или динамически подгружаемое содержимое, то лучшее решение – отслеживать события изменения размеров или загрузки и перерасчитывать высоту документа:
window.addEventListener('resize', () => {
// Контент обновился, пора обновить и измерение высоты.
const dynamicHeight = document.documentElement.scrollHeight;
});
Совместимость с браузерами: Универсальный код для всех
Вопрос совместимости браузеров всегда актуален, и мы хорошо знаем, что браузеры заметно отличаются друг от друга (усобица в основном связана с IE).
Если ваш проект должен функционировать в различных браузерах, универсальное решение – залог успеха:
function getDocumentHeight() {
// Выбираем максимальное значение среди всех доступных параметров.
return Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.body.clientHeight,
document.documentElement.clientHeight
);
}
Быструю проверку на различных браузеров обеспечат такие инструменты, как Firebug или пробковые доски jQuery.
Изящество jQuery: Аккуратное решение
Если вы используете jQuery, то вы можете воспользоваться простым решением, но следует помнить о потенциальных трудностях:
const jqHeight = $(document).height();
// Добрый старый jQuery.
Тем не менее, будьте бдительны, абсолютное позиционирование элементов или динамическая загрузка контента могут повлиять на точность измерений.
Важность изменения размера: Оптимизация производительности
Разработчикам не нравятся задержки в интерфейсах, поэтому рекомендуется использовать технику ограничения частоты пересчёта при изменении размеров окна:
let resizeTimeout; // Надёжный лимитер.
window.addEventListener('resize', () => {
clearTimeout(resizeTimeout); // Сброс таймера.
resizeTimeout = setTimeout(() => {
const throttledHeight = document.documentElement.scrollHeight;
// Подсчёт начнётся, если с момента последнего изменения прошло 100 мс.
}, 100);
});
Визуализация
Вообразите многослойный торт, где каждый слой – это элемент на странице. Мы измеряем его высоту с самого верха до самого дна:
🍰 Измерим высоту торта:
documentHeight = Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.documentElement.clientHeight
);
Так, все требуемые измерения перед нами:
- 📜 ScrollHeight – до последней крошки крема.
- 🚧 OffsetHeight – от самой любопытной точки на дне до самого верха.
- 🖥️ ClientHeight – это то, что видим мы на текущем экране.
// Берем максимальное из этих значений, и полная высота тортера у нас в руках! 📏🍰
Итог: Полная высота вашего документа подобна этому многослойному торту – включая все его скрытые слои! 🎉
Полезные материалы
- Свойство scrollHeight элемента – Веб API | MDN – Статья с детальным обзором свойства
scrollHeight
. - Как получить размер экрана, текущей веб-страницы и окна браузера – Обсуждение различных способов получения размеров экрана и документа.
- История двух видовых экранов – Статья о различии между размерами вьюпорта и документа.
- Как узнать, виден ли DOM-элемент в текущем вьюпорте? – Информация о том, как проверить видимость элемента в вьюпорте.
- Размеры окна и прокрутка – Руководство по размерам окна, прокрутке и методам расчета размеров документа.
- Window: getComputedStyle() – Веб API | MDN – Обзор метода
getComputedStyle()
, полезного для точных расчётов высоты с учетом стилей CSS.