JS метод Element.getBoundingClientRect()

Загальний опис

Метод getBoundingClientRect() дозволяє отримати розміри елемента та його позицію відносно видимої частини вікна браузера (viewport). Він повертає об'єкт DOMRect, що містить інформацію про координати елемента, його ширину та висоту. Цей метод є корисним для різноманітних завдань, пов'язаних із розміщенням та позиціонуванням елементів на сторінці, а також для розробки інтерактивних інтерфейсів та візуалізацій.

Використання getBoundingClientRect() найпростіше продемонструвати на прикладі:

let element = document.getElementById('myElement');
let rect = element.getBoundingClientRect();
console.log(rect.x); // Відстань від лівого краю вікна до лівого краю елемента
console.log(rect.y); // Відстань від верхнього краю вікна до верхнього краю елемента
console.log(rect.width); // Ширина елемента
console.log(rect.height); // Висота елемента

У цьому прикладі ми отримуємо об'єкт DOMRect для елемента з ідентифікатором myElement. Потім ми можемо отримати доступ до властивостей x, y, width та height, що містять відповідну інформацію про розміри та позицію елемента.

Метод getBoundingClientRect() часто використовується для перевірки, чи знаходиться елемент у видимій області вікна браузера. Для цього можна порівняти координати елемента з розмірами вікна:

let rect = element.getBoundingClientRect();
let isVisible = rect.top >= 0 && rect.left >= 0 &&
                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                rect.right <= (window.innerWidth || document.documentElement.clientWidth);

Ця перевірка визначає, чи всі координати елемента знаходяться всередині видимої області вікна браузера.

getBoundingClientRect() також корисний для реалізації функціональності "drag-and-drop" або створення інтерактивних елементів, що реагують на рух миші або дотик. Наприклад, ми можемо відстежувати позицію курсора миші відносно елемента:

element.addEventListener('mousemove', function(event) {
  let rect = this.getBoundingClientRect();
  let x = event.clientX - rect.left;
  let y = event.clientY - rect.top;
  // Виконати дії залежно від позиції курсора відносно елемента
});

Важливо пам'ятати, що getBoundingClientRect() повертає координати відносно видимої частини вікна браузера, а не відносно всього документа. Якщо потрібно отримати абсолютні координати елемента відносно документа, слід використовувати метод getBoundingClientRect() в поєднанні з властивостями scrollX та scrollY вікна.

Метод getBoundingClientRect() є широко використовуваним інструментом для роботи з розміщенням та позиціонуванням елементів на веб-сторінці. Він забезпечує гнучкість та зручність у виконанні різноманітних завдань, пов'язаних із геометрією та взаємодією з елементами DOM.

Синтаксис

getBoundingClientRect()

Параметри

Return

DOMRect

Повертає об'єкт DOMRect, що описує найменший прямокутник, який повністю охоплює елемент, включно з його полями та шириною рамки. Властивості left, top, right, bottom, x, y, width та height визначають позицію та розміри загального прямокутника в пікселях відносно лівого верхнього кута вікна перегляду. Властивості width та height об'єкта DOMRect, що повертається методом, включають поля та ширину рамки, а не лише ширину/висоту вмісту. Згідно зі стандартною моделлю блоку, це дорівнювало б властивості width або height елемента + поля + ширина рамки. Але якщо для елемента встановлено box-sizing: border-box, це безпосередньо дорівнюватиме його ширині або висоті.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

<div id="myDiv" style="width: 200px; height: 100px; background-color: #ccc;">Цей елемент має розміри 200x100 пікселів</div>

<script>
const divElement = document.getElementById('myDiv');
const rect = divElement.getBoundingClientRect();

console.log(`Ширина: ${rect.width} пікселів`);
console.log(`Висота: ${rect.height} пікселів`);
console.log(`Відстань від верхнього краю вікна: ${rect.top} пікселів`);
console.log(`Відстань від лівого краю вікна: ${rect.left} пікселів`);
</script>

<div id="myDiv" style="width: 300px; height: 200px; background-color: #ccc; margin-top: 1000px;">
  Цей елемент знаходиться нижче видимої області вікна.
</div>

<script>
const divElement = document.getElementById('myDiv');

function isElementInViewport() {
  const rect = divElement.getBoundingClientRect();
  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
  const windowWidth = window.innerWidth || document.documentElement.clientWidth;

  const vertInView = rect.top <= windowHeight && rect.bottom >= 0;
  const horzInView = rect.left <= windowWidth && rect.right >= 0;

  return vertInView && horzInView;
}

window.addEventListener('scroll', function() {
  if (isElementInViewport()) {
    console.log('Елемент видимий у вікні перегляду');
  } else {
    console.log('Елемент не видимий у вікні перегляду');
  }
});
</script>