Структура объекта getBoundingClientRect

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

Основные свойства DOMRect

Объект, возвращаемый getBoundingClientRect(), содержит следующие числовые свойства:

  • x и y Координаты верхнего левого угла элемента относительно левого верхнего угла viewport.

    • x аналог left
    • y аналог top

  • top, right, bottom, left Четыре стороны прямоугольника элемента относительно окна просмотра.

    • top — расстояние от верхней границы viewport до верхнего края элемента
    • left — расстояние от левого края viewport до левого края элемента
    • right — расстояние от левого края viewport до правого края элемента
    • bottom — расстояние от верхнего края viewport до нижнего края элемента

  • width и height Размеры элемента в пикселях.

    • width = right - left
    • height = bottom - top

  • toJSON() Метод, возвращающий объект с перечисленными выше свойствами для удобной сериализации.

Особенности и тонкости поведения

  1. Плавающие элементы и прокрутка Координаты top, right, bottom, left, x и y всегда учитывают текущую прокрутку документа. Если страница прокручена вниз, top будет отрицательным, если элемент выше видимой области.

  2. Трансформации CSS getBoundingClientRect() учитывает все CSS-трансформации (scale, rotate, translate) и возвращает реальные координаты после трансформации, а не исходные размеры элемента.

  3. Поддержка плавающих элементов в Floating UI Библиотека Floating UI использует getBoundingClientRect() для точного позиционирования тултипов и поповер-элементов. Она считывает width, height, а также координаты сторон, чтобы рассчитать смещения, стрелки и ограничения видимости.

Использование в Floating UI

При создании позиции всплывающего элемента (floating element) необходимо знать точные размеры и расположение якорного элемента. Пример объекта getBoundingClientRect() для элемента <button> может выглядеть так:

{
  x: 100,
  y: 200,
  top: 200,
  left: 100,
  right: 200,
  bottom: 250,
  width: 100,
  height: 50,
  toJSON: function() { ... }
}

В Floating UI эти данные используются для:

  • Расчета offset между якорем и всплывающим элементом
  • Определения flip boundaries для предотвращения выхода тултипа за viewport
  • Управления middleware, такими как shift, flip и offset

Взаимосвязь свойств

  • Свойства x и left идентичны, равно как и y и top
  • width и height вычисляются как разница между right и left, bottom и top соответственно
  • Изменение стиля border и padding влияет на возвращаемые координаты: getBoundingClientRect() возвращает включая padding и border, но не включая margin

Практические советы

  • Для абсолютного позиционирования элементов лучше использовать left и top вместо offsetTop и offsetLeft, так как они учитывают прокрутку и трансформации.
  • При работе с Floating UI важно обновлять getBoundingClientRect() динамически, если размеры родителя или viewport меняются, иначе тултип может позиционироваться некорректно.
  • Для расчета стрелок popper-элементов удобно использовать width и height якорного элемента, чтобы центрировать всплывающий элемент относительно него.

getBoundingClientRect() представляет собой ключевой инструмент для точного позиционирования, который учитывает реальное положение и размеры элементов в viewport, а не их статическую позицию в DOM. Его правильное понимание критично для работы с библиотеками типа Floating UI, где точность отображения напрямую влияет на пользовательский опыт.

Оглавление