JS властивість Element.scrollHeight

Загальний опис

Властивість scrollHeight є частиною інтерфейсу Element в JavaScript та представляє висоту вмісту елемента, включаючи частину, яка є поза межами видимої області прокрутки. Ця властивість відіграє важливу роль у роботі з прокручуваним вмістом на веб-сторінках, особливо при створенні складних користувацьких інтерфейсів та реалізації функціональності безкінечного скролу.

Значення scrollHeight обчислюється динамічно на основі розмірів вмісту елемента та його дочірніх вузлів. Воно завжди дорівнює або більше за висоту видимої області прокрутки елемента, представленої властивістю clientHeight. Якщо вміст елемента не перевищує видиму область, scrollHeight буде дорівнювати clientHeight.

Розглянемо простий приклад використання scrollHeight:

<div id="container" style="height: 200px; overflow: auto;">
  <p>Цей текст має висоту більшу, ніж видима область прокрутки.</p>
</div>

const container = document.getElementById('container');
console.log(container.scrollHeight); // Виведе висоту вмісту, наприклад, 300
console.log(container.clientHeight); // Виведе висоту видимої області, 200

У цьому прикладі ми маємо контейнер з обмеженою висотою 200 пікселів та вмістом, який перевищує цю висоту. Властивість scrollHeight повертає повну висоту вмісту, яка в даному випадку становить 300 пікселів, тоді як clientHeight повертає висоту видимої області прокрутки, яка дорівнює 200 пікселів.

Властивість scrollHeight часто використовується у поєднанні з іншими властивостями прокрутки, такими як scrollTop та clientHeight, для реалізації функціональності безкінечного скролу або виявлення досягнення кінця вмісту. Наприклад:

const container = document.getElementById('container');
const handleScroll = () => {
  const scrollPosition = container.scrollTop + container.clientHeight;
  if (scrollPosition >= container.scrollHeight) {
    // Користувач досяг кінця вмісту
    loadMoreContent();
  }
};

container.addEventListener('scroll', handleScroll);

У цьому прикладі ми додаємо обробник події scroll до контейнера. Під час прокрутки ми обчислюємо поточну позицію прокрутки (scrollTop + clientHeight) та порівнюємо її з scrollHeight. Якщо ці значення збігаються, це означає, що користувач досяг кінця вмісту, і ми можемо завантажити додатковий вміст, викликавши функцію loadMoreContent().

Властивість scrollHeight також корисна при розробці адаптивних інтерфейсів, коли потрібно динамічно змінювати розміри елементів або їх вміст залежно від розмірів вікна браузера або пристрою. Вона дозволяє точно визначити висоту вмісту елемента, незалежно від його видимості на екрані.

Синтаксис

Element.scrollHeight

Значення

Return

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

const div = document.getElementById('myDiv');
const height = div.scrollHeight;
console.log(`Висота елемента з урахуванням прокрутки: ${height}px`);

const content = document.getElementById('content');
let currentPage = 1;

function loadMoreContent() {
  // Симулюємо завантаження вмісту з сервера
  const newContent = `<p>Це новий контент зі сторінки ${currentPage}</p>`;
  content.insertAdjacentHTML('beforeend', newContent);
  currentPage++;
}

window.addEventListener('scroll', function() {
  const scrollHeight = document.documentElement.scrollHeight;
  const scrollTop = document.documentElement.scrollTop;
  const clientHeight = document.documentElement.clientHeight;

  if (scrollTop + clientHeight >= scrollHeight) {
    loadMoreContent();
  }
});