Координаты и getBoundingClientRect

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Первая система — относительно окна. Начало отсчёта в левом верхнем углу видимой области, и стоит прокрутить страницу, как все адреса меняются: уехавший вверх элемент получает отрицательный top. В событиях мыши это clientX и clientY, и именно эти координаты возвращает getBoundingClientRect() — буква C в его названии как раз от client.

Вторая система — относительно документа. Начало отсчёта в левом верхнем углу страницы целиком, включая ещё не прокрученную часть. Элемент стоит там, где стоял, сколько ни крути. В событиях мыши это pageX и pageY, а перевод между системами умещается в одну строку: документ = окно + window.scrollY (и scrollX по горизонтали).

js

const tall = document.getElementById("tall");
const flag = document.getElementById("flag");
tall.style.height = "1500px"; // чтобы странице было куда прокручиваться

const winTop1 = flag.getBoundingClientRect().top;
const docTop1 = winTop1 + window.scrollY;

window.scrollBy(0, 300);

const winTop2 = flag.getBoundingClientRect().top;
const docTop2 = winTop2 + window.scrollY;

console.log(winTop2 <= winTop1);
console.log(Math.abs(docTop1 - docTop2) < 1);

страница примера

Сначала предположите, что выведет код

Метод отдаёт объект DOMRect — сразу шесть чисел про прямоугольник элемента. Все они в координатах окна, поэтому у прокрученного вверх блока top спокойно уходит в минус. И это снимок на момент вызова: он не обновляется сам, после прокрутки, ресайза или смены стилей нужно мерить заново.

Свойство	Что в нём
top / bottom	верхняя и нижняя границы, по вертикали относительно окна
left / right	левая и правая границы, по горизонтали относительно окна
width / height	размеры вместе с padding и рамкой, уже с учётом transform
x / y	то же самое, что left и top; расходятся только у прямоугольников с отрицательными размерами

js

const card = document.getElementById("card");
card.style.cssText = "width:200px;height:80px;padding:0;border:0;box-sizing:content-box";

const r = card.getBoundingClientRect();
console.log(r.width);
console.log(r.height);

card.style.transform = "scale(2)";
console.log(card.getBoundingClientRect().width);
console.log(card.offsetWidth);

страница примера

Сначала предположите, что выведет код

Вызов не бесплатный: чтобы отдать числа, браузер обязан досчитать раскладку. Если в цикле чередовать запись стиля и чтение rect, страница будет пересчитываться на каждом шаге. Сначала измерьте всё, что нужно, и только потом пишите стили.

DOMRect возвращает числа с плавающей точкой: раскладка считается в долях пикселя, сверху накладываются масштаб страницы и дробный devicePixelRatio. Поэтому ширина легко окажется 199.99998, а невинное rect.width === 200 — ложным. Сравнивайте округлённые значения или с допуском.

Документные координаты нужны там, где элемент должен остаться на месте при прокрутке: подсказка на position: absolute, запомненная позиция блока, сравнение с pageY события мыши. Готового метода нет, но нужная функция пишется в четыре строки — прибавить прокрутку к тому, что вернул getBoundingClientRect().

Только не считайте документные координаты неподвижными вообще. Они защищают от прокрутки страницы, но не от прокрутки контейнера: если элемент лежит внутри блока с overflow: auto, то при его прокрутке элемент действительно переезжает — и в окне, и в документе.

js

const scroller = document.getElementById("scroller");
const spacer = document.getElementById("spacer");
const mark = document.getElementById("mark");
scroller.style.cssText = "height:100px;overflow:auto";
spacer.style.height = "300px";

function getCoords(el) {
  const r = el.getBoundingClientRect();
  return { top: r.top + window.scrollY, left: r.left + window.scrollX };
}

const winBefore = mark.getBoundingClientRect().top;
const docBefore = getCoords(mark).top;

scroller.scrollTop = 50; // прокрутили не страницу, а контейнер

console.log(Math.round(winBefore - mark.getBoundingClientRect().top));
console.log(Math.round(docBefore - getCoords(mark).top));

страница примера

Сначала предположите, что выведет код

Есть и третья система отсчёта: offsetTop и offsetLeft считаются от offsetParent — ближайшего позиционированного предка. Значения целые, transform игнорируется — ровно как у offsetWidth в статье «Размеры элемента: offset, client, scroll», где эта разница с getBoundingClientRect() и разбиралась. Внутри своего компонента это удобно, но сравнивать два элемента из разных углов страницы такими числами нельзя: у них разные точки отсчёта. getBoundingClientRect() от разметки предков не зависит вовсе.

document.elementFromPoint(x, y) отвечает на обратный вопрос: не «где элемент», а «что лежит в этой точке». Координаты нужны оконные — те же, что clientX/clientY. Если на руках документные, вычтите прокрутку. Точка за пределами видимой области (отрицательная или больше размеров окна) даёт null — проверять результат стоит всегда.

js

const inner = document.getElementById("inner");
const r = inner.getBoundingClientRect();
const x = r.left + r.width / 2;
const y = r.top + r.height / 2;

console.log(document.elementFromPoint(x, y) === inner);
console.log(document.elementFromPoint(-10, -10));

страница примера

Сначала предположите, что выведет код

Метод возвращает самый верхний элемент в точке — тот, по которому попал бы клик. Если нужна вся стопка, есть elementsFromPoint(): массив от верхнего к нижнему. Отсюда же важное следствие для подсказок, которые ходят за курсором: пока у подсказки нет pointer-events: none, в точке курсора браузер будет находить именно её.

js

const under = document.getElementById("under");
const over = document.getElementById("over");

const r = under.getBoundingClientRect();
over.style.cssText = "position:fixed;left:" + r.left + "px;top:" + r.top + "px;width:" + r.width + "px;height:" + r.height + "px";

const x = r.left + r.width / 2;
const y = r.top + r.height / 2;
console.log(document.elementFromPoint(x, y) === over);

const stack = document.elementsFromPoint(x, y);
console.log(stack.indexOf(over) < stack.indexOf(under));

страница примера

Сначала предположите, что выведет код

Классическая задача складывается из трёх шагов: измерить якорь, измерить саму подсказку, выбрать точку. Если подсказка на position: fixed, координаты берутся прямо из getBoundingClientRect() без всякой арифметики с прокруткой — она останется на месте относительно окна. Если нужна position: absolute, чтобы подсказка ехала вместе с содержимым, прибавьте scrollX/scrollY.

js

const btn = document.getElementById("btn");
const tip = document.getElementById("tip");
tip.style.cssText = "position:fixed;margin:0;width:120px";

const a = btn.getBoundingClientRect();
tip.style.left = a.left + "px";
tip.style.top = a.bottom + 6 + "px";

const t = tip.getBoundingClientRect();
console.log(Math.round(t.top - a.bottom));
console.log(Math.round(t.left - a.left));

страница примера

Сначала предположите, что выведет код

Дальше начинается взрослая часть: у окна есть края. Высота видимой области — document.documentElement.clientHeight, ширина — clientWidth (это размеры без полос прокрутки, в отличие от innerHeight). Не помещается снизу — переворачиваем наверх; упирается в правый край — сдвигаем влево.

js

const anchor = document.getElementById("anchor");
const hint = document.getElementById("hint");
hint.style.cssText = "position:fixed;margin:0;width:120px";

const gap = 6;
const view = document.documentElement;
const a = anchor.getBoundingClientRect();
const h = hint.getBoundingClientRect();

const fitsBelow = view.clientHeight - a.bottom >= h.height + gap;
hint.style.top = (fitsBelow ? a.bottom + gap : a.top - h.height - gap) + "px";
hint.style.left = Math.max(gap, Math.min(a.left, view.clientWidth - h.width - gap)) + "px";

const placed = hint.getBoundingClientRect();
console.log(Math.round(placed.right) <= view.clientWidth);
console.log(Math.round(placed.top - a.bottom) === gap || Math.round(a.top - placed.bottom) === gap);

страница примера

Сначала предположите, что выведет код

Координаты окна отсчитываются от левого верхнего угла видимой области и меняются при прокрутке; координаты документа отсчитываются от начала страницы и не меняются.
Перевод между ними: документ = окно + window.scrollX по горизонтали и window.scrollY по вертикали.
getBoundingClientRect() отдаёт top, left, right, bottom, width, height в координатах окна, дробными числами и с учётом transform — и это снимок, а не живая связь.
elementFromPoint(x, y) ждёт оконные координаты и возвращает самый верхний элемент в точке или null за пределами видимой области; elementsFromPoint отдаёт всю стопку.
Подсказку проще всего ставить на position: fixed прямо по rect якоря, проверяя, помещается ли она снизу и не упирается ли в край окна.

1/3Страница прокручена на 200 пикселей вниз. У элемента getBoundingClientRect().top равен 50. Какая у него координата относительно документа?

2/3Какие координаты ждёт document.elementFromPoint(x, y)?

3/3У элемента CSS-ширина 100px и transform: scale(2). Что вернут getBoundingClientRect().width и offsetWidth?

Координаты элемента в документе

Напишите функцию getDocCoords(elem), которая возвращает объект с полями top, left, bottom, right — границы элемента относительно документа. Проверки в примере должны напечатать true при любой прокрутке страницы.

js

function getDocCoords(elem) {
  // ваш код
}

const probe = document.getElementById("probe");
const r = probe.getBoundingClientRect();
const c = getDocCoords(probe);

console.log(c.top === r.top + window.scrollY); // true
console.log(c.right === r.right + window.scrollX); // true

страница примера

Сначала предположите, что выведет код

Прямоугольник от getBoundingClientRect() уже посчитан относительно окна — остаётся прибавить прокрутку страницы, по вертикали и по горизонтали.

jsлистинг · не запускается

function getDocCoords(elem) {
  const r = elem.getBoundingClientRect();
  return {
    top: r.top + window.scrollY,
    left: r.left + window.scrollX,
    bottom: r.bottom + window.scrollY,
    right: r.right + window.scrollX
  };
}

function getDocCoords(elem) {
  const r = elem.getBoundingClientRect();
  return {
    top: r.top + window.scrollY,
    left: r.left + window.scrollX,
    bottom: r.bottom + window.scrollY,
    right: r.right + window.scrollX
  };
}

Две ловушки. Первая — перепутанные оси: к top и bottom прибавляется scrollY, к left и right — scrollX. Вторая — попытка сохранить результат надолго: это снимок, и после любой прокрутки контейнера или изменения раскладки функцию нужно вызвать заново.

Подсказка, которая не вылезает за окно

Напишите positionHint(anchor, hint): подсказка hint с position: fixed встаёт под элементом anchor с отступом 6 пикселей. Если снизу не хватает места — переворачивается наверх. По горизонтали левые края совпадают, но подсказка не должна выходить за края видимой области.

Сначала два измерения, потом одно решение, потом запись стилей — в таком порядке браузер пересчитает раскладку один раз.

jsлистинг · не запускается

function positionHint(anchor, hint) {
  const gap = 6;
  const view = document.documentElement;
  const a = anchor.getBoundingClientRect();
  const h = hint.getBoundingClientRect();

  const fitsBelow = view.clientHeight - a.bottom >= h.height + gap;
  const top = fitsBelow ? a.bottom + gap : a.top - h.height - gap;
  const left = Math.max(gap, Math.min(a.left, view.clientWidth - h.width - gap));

  hint.style.top = top + "px";
  hint.style.left = left + "px";
}

function positionHint(anchor, hint) {
  const gap = 6;
  const view = document.documentElement;
  const a = anchor.getBoundingClientRect();
  const h = hint.getBoundingClientRect();

  const fitsBelow = view.clientHeight - a.bottom >= h.height + gap;
  const top = fitsBelow ? a.bottom + gap : a.top - h.height - gap;
  const left = Math.max(gap, Math.min(a.left, view.clientWidth - h.width - gap));

  hint.style.top = top + "px";
  hint.style.left = left + "px";
}

Размеры окна берём у documentElement: clientWidth и clientHeight не включают полосы прокрутки, в отличие от innerWidth. И считать h.height нужно до записи координат — у уже видимой подсказки, иначе высота окажется нулевой.

Координаты и getBoundingClientRect

Видеоразбор темы за 5–7 минут

Две системы отсчётаОкно и документ отличаются на прокрутку

getBoundingClientRect()Весь прямоугольник элемента одним вызовом

Перевод в координаты документаscrollX и scrollY склеивают две системы

elementFromPointКто находится в этой точке окна

Подсказка рядом с элементомСчитаем место снизу и справа

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Координаты элемента в документе

Подсказка, которая не вылезает за окно