Определение scrollWidth и его применение в веб-разработке

Пример 1: Карусель с автоматическим определением переполнения

Создается контейнер с элементами. При загрузке проверяется, не выходит ли содержимое за границы, и если да, то отображаются кнопки прокрутки.

const carousel = document.getElementById('carousel');
const track = document.getElementById('track');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');

function checkOverflow() {
  if (track.scrollWidth > track.clientWidth) {
    prevBtn.style.display = 'block';
    nextBtn.style.display = 'block';
  } else {
    prevBtn.style.display = 'none';
    nextBtn.style.display = 'none';
  }
}
window.addEventListener('load', checkOverflow);
window.addEventListener('resize', checkOverflow);

При ширине трека 1200px и видимой области 800px scrollWidth > clientWidth, кнопки show.

Пример 2: Кнопка 'Показать больше текста' с проверкой переполнения

Текст обрезается с помощью CSS (text-overflow: ellipsis). Если scrollWidth текстового контейнера больше его clientWidth, значит текст не помещается, и показывается кнопка.

const textBlock = document.getElementById('text');
const toggleBtn = document.getElementById('toggle');
if (textBlock.scrollWidth > textBlock.clientWidth) {
  toggleBtn.style.display = 'inline';
} else {
  toggleBtn.style.display = 'none';
}

Для длинного текста кнопка появляется; для короткого - скрывается.

Важно: так как text-overflow не влияет на scrollWidth, сравнение корректно.

Пример 3: Получение scrollWidth для вложенных контейнеров

Вложенный элемент может иметь scrollWidth меньше родителя, если у родителя overflow: hidden. Прямой scrollWidth вложенного элемента покажет полную ширину его содержимого.

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
console.log('outer scrollWidth:', outer.scrollWidth);
console.log('inner scrollWidth:', inner.scrollWidth);

outer scrollWidth: 800
inner scrollWidth: 1500

Пояснение: inner не ограничен родителем, поэтому его scrollWidth равен ширине всех дочерних элементов.

Пример 4: Использование ResizeObserver для отслеживания изменения scrollWidth

Изменение размера контейнера влияет на scrollWidth. ResizeObserver позволяет реагировать на изменения.

const container = document.getElementById('container');
const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('clientWidth:', entry.contentRect.width);
    console.log('scrollWidth:', entry.target.scrollWidth);
  }
});
observer.observe(container);

При изменении ширины окна выводятся актуальные значения.

Пример 5: Анимация прокрутки до конца на основе scrollWidth

Прокрутка элемента до самого правого края содержимого.

const list = document.getElementById('horizontal-list');
const scrollToEnd = () => {
  const maxScroll = list.scrollWidth - list.clientWidth;
  list.scrollTo({ left: maxScroll, behavior: 'smooth' });
};

Элемент плавно прокручивается до конца.

Проблема: если контент изменяется динамически, maxScroll может устареть. Рекомендуется пересчитывать перед вызовом.

Пример 6: Определение scrollWidth для элемента с псевдоэлементами

Псевдоэлементы ::before и ::after не учитываются в scrollWidth, так как они не являются частью содержимого. ScrollWidth зависит только от реальных дочерних узлов и текста.

const el = document.getElementById('with-pseudo');
console.log(el.scrollWidth);

Если требуется учесть псевдоэлементы, следует использовать getComputedStyle для получения их ширины, либо добавлять реальные элементы.