Размеры и прокрутка элементов

offsetWidth и offsetHeight

Эти свойства возвращают внешние размеры элемента, включая padding и границы (border), но без margin.

const box = document.querySelector(".box");

console.log("Ширина:", box.offsetWidth);
console.log("Высота:", box.offsetHeight);

Используется, когда нужно узнать, сколько места реально занимает элемент на странице.

clientWidth и clientHeight

Эти свойства показывают внутренние размеры элемента, включая padding, но без границ и полос прокрутки.

console.log("Внутренняя ширина:", box.clientWidth);
console.log("Внутренняя высота:", box.clientHeight);

scrollWidth и scrollHeight

Показывают общую ширину и высоту содержимого, включая то, что скрыто за пределами видимой области (если есть прокрутка).

console.log("Полная ширина содержимого:", box.scrollWidth);
console.log("Полная высота содержимого:", box.scrollHeight);

Полезно при создании кастомных скроллбаров или анимаций.

scrollTop и scrollLeft

Эти свойства возвращают текущее смещение прокрутки сверху и слева.

console.log("Прокрутка сверху:", box.scrollTop);
console.log("Прокрутка слева:", box.scrollLeft);

Можно и установить:

box.scrollTop = 100; // Прокрутить на 100 пикселей вниз

getBoundingClientRect()

Метод возвращает объект с координатами и размерами элемента относительно окна браузера, а не документа.

const rect = box.getBoundingClientRect();

console.log("Top:", rect.top);
console.log("Left:", rect.left);
console.log("Width:", rect.width);
console.log("Height:", rect.height);

Очень полезно при работе с всплывающими элементами, подсказками и позиционированием.

Управление прокруткой программно

// Прокрутить элемент вниз на 300 пикселей
box.scrollBy(0, 300);

// Прокрутить до конкретных координат
box.scrollTo({
  top: 500,
  behavior: "smooth"
});

Также можно прокручивать всю страницу:

window.scrollTo({
  top: 1000,
  behavior: "smooth"
});

Обработка события прокрутки

box.addEventListener("scroll", () => {
  console.log("Прокручено на:", box.scrollTop, "пикселей");
});

Пример:

<div class="scroll-box" style="height: 200px; overflow-y: scroll;">
  <div style="height: 1000px; background: linear-gradient(#fff, #ccc)">
    Длинный контент
  </div>
</div>

<script>
  const scrollBox = document.querySelector(".scroll-box");

  scrollBox.addEventListener("scroll", () => {
    if (
      scrollBox.scrollTop + scrollBox.clientHeight >=
      scrollBox.scrollHeight
    ) {
      console.log("Достигнут конец прокрутки!");
    }
  });
</script>