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

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

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

Найпростіший спосіб отримати значення scrollWidth - це звернутися до відповідної властивості елемента:

const element = document.getElementById('myElement');
const scrollWidth = element.scrollWidth;
console.log(scrollWidth); // Виведе ширину вмісту елемента

Властивість scrollWidth часто використовується у поєднанні з іншими властивостями, такими як clientWidth та offsetWidth, для визначення, чи є в елемента прихований вміст. Наприклад:

const element = document.getElementById('myElement');
const hasHorizontalOverflow = element.scrollWidth > element.clientWidth;

if (hasHorizontalOverflow) {
  console.log('Елемент має прихований горизонтальний вміст');
} else {
  console.log('Весь вміст елемента видимий');
}

У цьому прикладі clientWidth - це ширина видимої області елемента, а scrollWidth - повна ширина вмісту елемента. Якщо scrollWidth більша за clientWidth, це означає, що елемент має прихований горизонтальний вміст.

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

const element = document.getElementById('myElement');
element.scrollLeft = element.scrollWidth - element.clientWidth;

У цьому прикладі ми встановлюємо значення властивості scrollLeft (відповідальної за горизонтальну прокрутку) таким чином, щоб прокрутити елемент до його кінця. Різниця між scrollWidth та clientWidth дає максимальну позицію горизонтальної прокрутки.

Крім того, scrollWidth може бути корисною для реалізації динамічної поведінки прокрутки у поєднанні з подіями, такими як scroll або resize. Наприклад, ви можете відстежувати, коли користувач прокручує елемент до його кінця:

const element = document.getElementById('myElement');

element.addEventListener('scroll', () => {
  const isAtEnd = element.scrollLeft + element.clientWidth >= element.scrollWidth;
  if (isAtEnd) {
    console.log('Елемент прокручено до кінця');
  }
});

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

Синтаксис

Element.scrollWidth

Значення

Return

Переглядачі

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

Приклади

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

const container = document.getElementById('container');
const widthDisplay = document.getElementById('widthDisplay');

// Відображаємо ширину вмісту контейнера
widthDisplay.textContent = `Ширина вмісту: ${container.scrollWidth} пікселів`;

const container = document.getElementById('container');
const endReachedDisplay = document.getElementById('endReachedDisplay');

const checkEndReached = () => {
  const endReached = container.scrollLeft + container.offsetWidth >= container.scrollWidth;
  endReachedDisplay.textContent = endReached ? 'Кінець досягнуто' : 'Кінець не досягнуто';
};

container.addEventListener('scroll', checkEndReached);