Что показывает функция getBoundingClientTrack

getBoundingClientRect() возвращает объект DOMRect с размерами и позицией элемента относительно viewport (видимой части страницы).

Свойства объекта:

• x, y – координаты верхнего левого угла
• width, height – размеры элемента
• top, right, bottom, left – расстояния до границ viewport

Пример:

const box = document.querySelector('.box');
const rect = box.getBoundingClientRect();
console.log(rect.width); // ширина элемента
console.log(rect.top); // расстояние от верха viewport до элемента

⚠️ Важно:

• Координаты меняются при прокрутке
• Возвращаемые значения включают padding и border, но не margin
• Для получения позиции относительно документа нужно добавить window.scrollY/X к top/left