Что делает getBoundingClientRect?

Что такое getBoundingClientRect?

Метод getBoundingClientRect вызывается на DOM-элементе и возвращает объект DOMRect, который описывает размер элемента и его положение относительно видимой области окна (viewport). Координаты считаются от верхнего левого угла viewport, а не от документа в целом.

Основные свойства возвращаемого объекта

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

Пример использования

const element = document.getElementById('myBox');
const rect = element.getBoundingClientRect();
console.log(rect.top, rect.left, rect.width, rect.height);
// Например: 100, 50, 200, 150

Где применяется

• Проверка, виден ли элемент на экране (например, для lazy loading изображений).
• Позиционирование всплывающих окон или тултипов относительно элемента.
• Анимации, зависящие от положения элемента (например, параллакс).

Вывод

Метод getBoundingClientRect — простой и эффективный способ получить точные координаты элемента в viewport. Он незаменим для задач, связанных с определением видимости и позиционированием в динамических интерфейсах.