scrollHeight в JavaScript — повна висота вмісту елемента

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

Властивість 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 також корисна при розробці адаптивних інтерфейсів, коли потрібно динамічно змінювати розміри елементів або їх вміст залежно від розмірів вікна браузера або пристрою. Вона дозволяє точно визначити висоту вмісту елемента, незалежно від його видимості на екрані.

правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

Пам'ятайте, що scrollHeight завжди повертає висоту вмісту, навіть якщо він повністю не відображається на екрані. Це означає, що якщо елемент має overflow: hidden, scrollHeight все одно буде відображати повну висоту вмісту, а не обрізану.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Element.scrollHeight

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	21	1	8	12	5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	21	1

Приклади

+ запропонувати свій приклад у пісочниці

<div id="myDiv" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

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

<header>
  <h2 class="title">Element: scrollHeight property</h2>
  <p class="description">Повертає висоту елемента, включаючи частину, що не видима через обмеження розміру або наявність прокрутки.</p>
</header>
<main>
  <div class="result">
    <div id="content" style="height: 200px; overflow: auto;">
      <p>Це великий текст, який не поміщається у видимій області елемента. Прокрутіть вниз, щоб побачити більше вмісту.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nisl nec ultricies tincidunt, nisl nisl aliquam nisl, eget aliquam nisl nisl eget nisl. Sed auctor, nisl nec ultricies tincidunt, nisl nisl aliquam nisl, eget aliquam nisl nisl eget nisl.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nisl nec ultricies tincidunt, nisl nisl aliquam nisl, eget aliquam nisl nisl eget nisl. Sed auctor, nisl nec ultricies tincidunt, nisl nisl aliquam nisl, eget aliquam nisl nisl eget nisl.</p>
    </div>
    <p>Висота елемента з урахуванням прокрутки: <span id="scrollHeight"></span></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

const content = document.getElementById('content');
const scrollHeightElement = document.getElementById('scrollHeight');

function updateScrollHeight() {
  scrollHeightElement.textContent = `${content.scrollHeight}px`;
}

content.addEventListener('scroll', updateScrollHeight);
updateScrollHeight();
//# sourceURL=pen.js

<div id="content" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

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();
  }
});