Что такое GetBoundedClientRec

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

Свойства возвращаемого объекта:

• top, left — расстояние от верхнего/левого края viewport до элемента.
• right, bottom — расстояние до правого/нижнего края элемента.
• width, height — ширина и высота элемента (включая padding и border).

Пример:

const box = document.querySelector('.box');
const rect = box.getBoundingClientRect();
console.log(rect.width); // Ширина элемента

Особенности:

• Координаты изменяются при скролле.
• Для получения позиции относительно документа нужно добавить window.scrollY/window.scrollX.
• Вызов метода вызывает reflow (пересчёт макета), что может быть затратным.