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.

правити

Порада

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

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

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

Порада

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

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

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

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

Порада

Якщо ви працюєте з елементами, що мають властивість overflow зі значенням auto або scroll, використовуйте scrollWidth для визначення повної ширини їхнього вмісту, навіть якщо частина цього вмісту прихована. Наприклад, ви можете використовувати scrollWidth для розрахунку коефіцієнта масштабування вмісту елемента відповідно до його ширини:

const element = document.getElementById('myElement');
const scaleFactor = element.clientWidth / element.scrollWidth;

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

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

Синтаксис

Element.scrollWidth

Переглядачі

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

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

Переглядач
	1	1	1	12.1	12

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

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

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

Переглядач
	-	-

Приклади

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

<div id="container" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>
<div id="widthDisplay">Демонстраційний елемент</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 container = document.getElementById('container');
const widthDisplay = document.getElementById('widthDisplay');

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

<div id="container" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>
<div id="endReachedDisplay">Демонстраційний елемент</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 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);