Способы получения высоты всего документа в 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 – это то, что видим мы на текущем экране.

// Берем максимальное из этих значений, и полная высота тортера у нас в руках! 📏🍰

Итог: Полная высота вашего документа подобна этому многослойному торту – включая все его скрытые слои! 🎉

Полезные материалы

1. Свойство scrollHeight элемента – Веб API | MDN – Статья с детальным обзором свойства scrollHeight.
2. Как получить размер экрана, текущей веб-страницы и окна браузера – Обсуждение различных способов получения размеров экрана и документа.
3. История двух видовых экранов – Статья о различии между размерами вьюпорта и документа.
4. Как узнать, виден ли DOM-элемент в текущем вьюпорте? – Информация о том, как проверить видимость элемента в вьюпорте.
5. Размеры окна и прокрутка – Руководство по размерам окна, прокрутке и методам расчета размеров документа.
6. Window: getComputedStyle() – Веб API | MDN – Обзор метода getComputedStyle(), полезного для точных расчётов высоты с учетом стилей CSS.