scrollWidth в JavaScript — повна ширина вмісту елемента

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

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.

автор: Bond

Порада

Встановлюйте значення властивості 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

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 1 ≤12.1 12 5
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 4 1

Приклади

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

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

HTML

<div id="container" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>
<div id="widthDisplay">Демонстраційний елемент</div>

CSS

.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;
}

JS

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

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

У цьому складнішому прикладі ми створюємо функцію, яка визначає, чи користувач досяг кінця горизонтальної прокрутки елемента. Це може бути корисно для реалізації функціональності типу "Завантажити більше" або для виявлення, коли користувач переглянув весь вміст.

HTML

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

CSS

.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;
}

JS

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);
автор: Bond

HTML

<header>
  <h2 class="title">Element: scrollWidth property</h2>
  <p class="description">Отримує повну ширину вмісту елемента, включаючи частину, що не відображається через горизонтальну прокрутку.</p>
</header>
<main>
  <div class="result">
    <div id="container">
      <div class="content">
        <!-- Широкий вміст, наприклад, зображення або таблиця -->
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='200' viewBox='0 0 2000 200'%3E%3Crect width='2000' height='200' fill='%23264653'/%3E%3Crect x='0' width='200' height='200' fill='%232a9d8f'/%3E%3Ctext x='100' y='125' font-family='sans-serif' font-size='72' text-anchor='middle' fill='%23264653'%3E1%3C/text%3E%3Crect x='200' width='200' height='200' fill='%23e9c46a'/%3E%3Ctext x='300' y='125' font-family='sans-serif' font-size='72' text-anchor='middle' fill='%23264653'%3E2%3C/text%3E%3Crect x='400' width='200' height='200' fill='%232a9d8f'/%3E%3Ctext x='500' y='125' font-family='sans-serif' font-size='72' text-anchor='middle' fill='%23264653'%3E3%3C/text%3E%3Crect x='600' width='200' height='200' fill='%23e9c46a'/%3E%3Ctext x='700' y='125' font-family='sans-serif' font-size='72' text-anchor='middle' fill='%23264653'%3E4%3C/text%3E%3Crect x='800' width='200' height='200' fill='%232a9d8f'/%3E%3Ctext x='900' y='125' font-family='sans-serif' font-size='72' text-anchor='middle' fill='%23264653'%3E5%3C/text%3E%3Crect x='1000' width='200' height='200' fill='%23e9c46a'/%3E%3Ctext x='1100' y='125' font-family='sans-serif' font-size='72' text-anchor='middle' fill='%23264653'%3E6%3C/text%3E%3Crect x='1200' width='200' height='200' fill='%232a9d8f'/%3E%3Ctext x='1300' y='125' font-family='sans-serif' font-size='72' text-anchor='middle' fill='%23264653'%3E7%3C/text%3E%3Crect x='1400' width='200' height='200' fill='%23e9c46a'/%3E%3Ctext x='1500' y='125' font-family='sans-serif' font-size='72' text-anchor='middle' fill='%23264653'%3E8%3C/text%3E%3Crect x='1600' width='200' height='200' fill='%232a9d8f'/%3E%3Ctext x='1700' y='125' font-family='sans-serif' font-size='72' text-anchor='middle' fill='%23264653'%3E9%3C/text%3E%3Crect x='1800' width='200' height='200' fill='%23e9c46a'/%3E%3Ctext x='1900' y='125' font-family='sans-serif' font-size='72' text-anchor='middle' fill='%23264653'%3E10%3C/text%3E%3C/svg%3E" alt="Wide Content">
      </div>
    </div>
    <div id="endReachedDisplay">Кінець не досягнуто</div>
  </div>
</main>

CSS

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

#container {
  width: 500px;
  overflow-x: auto;
  white-space: nowrap;
}

.content {
  display: inline-block;
}

JS

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);
//# sourceURL=pen.js
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід