Координаты

Координаты мыши

Когда пользователь двигает мышь или нажимает кнопку, в событии мыши доступны следующие свойства:

Пример:

document.addEventListener("click", (event) => {
  console.log(`Координаты мыши:`);
  console.log(`client: ${event.clientX}, ${event.clientY}`);
  console.log(`page:   ${event.pageX}, ${event.pageY}`);
  console.log(`screen: ${event.screenX}, ${event.screenY}`);
});

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

Если вы хотите узнать, где находится элемент на странице, используйте getBoundingClientRect():

const element = document.querySelector("#myBox");
const rect = element.getBoundingClientRect();

console.log(`Top: ${rect.top}`);
console.log(`Left: ${rect.left}`);
console.log(`Bottom: ${rect.bottom}`);
console.log(`Right: ${rect.right}`);
console.log(`Width: ${rect.width}, Height: ${rect.height}`);

Эти значения относительны к viewport. Если вы хотите получить абсолютные координаты на странице (включая прокрутку), используйте:

const scrollTop = window.scrollY;
const scrollLeft = window.scrollX;

const absoluteTop = rect.top + scrollTop;
const absoluteLeft = rect.left + scrollLeft;

console.log(`Абсолютные координаты: top=${absoluteTop}, left=${absoluteLeft}`);

Прокрутка и координаты

Когда страница прокручивается, координаты clientX/Y остаются теми же, но pageX/Y изменяются. Это важно при работе с фиксированными и абсолютными позициями.

Получение текущей прокрутки:

console.log(window.scrollX, window.scrollY);

Автоматическая прокрутка к элементу:

document.querySelector("#target").scrollIntoView({ behavior: "smooth" });

Разница между client, page и screen координатами

Практические примеры

Подсказка, следующая за мышкой:

const tooltip = document.querySelector("#tooltip");

document.addEventListener("mousemove", (e) => {
  tooltip.style.left = e.pageX + 10 + "px";
  tooltip.style.top = e.pageY + 10 + "px";
});

Определить, навёлся ли курсор на элемент:

element.addEventListener("mousemove", (e) => {
  const rect = element.getBoundingClientRect();
  console.log(`Курсор внутри? ${e.clientX >= rect.left && e.clientX <= rect.right}`);
});