JavaScript: размеры элементов, координаты, прокрутка

Метрики элемента

Размеры

Внешние размеры (включая рамку):

element.offsetWidth
element.offsetHeight

Внутренние размеры (внутри рамки, включая паддинги, исключая невидимую часть при прокрутке):

element.clientWidth
element.clientHeight

Полные внутренние размеры (с учетом невидимой прокрученной части):

element.scrollWidth
element.scrollHeight

Отступ внутренней части элемента от внешней (ширина рамки border):

element.clientTop
element.clientLeft

Положение прокрутки

element.scrollTop
element.scrollLeft

Эти значения можно изменять.

Смещение относительно родителя

Ссылка на родителя, относительно которого позиционируется элемент:

element.offsetParent

Для элементов со статическим и относительным позиционированием это будет ближайший родитель, для абсолютно и фиксированно позиционированных элементов — ближайший позиционированный слой.

Смещение относительно offsetParent:

element.offsetLeft
element.offsetTop

Метрики страницы

Ширина и высота видимой области:

document.documentElement.clientWidth
document.documentElement.clientHeight

Ширина и высота окна браузера (с учетом скроллбара):

window.innerWidth
window.innerHeight

Положение прокрутки

window.pageXOffset
window.pageYOffset

Точное определение размера страницы с учетом прокрутки

let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

Изменение прокрутки страницы

Смещение относительно текущих координат (на x пикселей вправо, на y пикселей вниз):

window.scrollBy(x,y)

Прокрутка к указанным координатам:

window.scrollTo(pageX, pageY)

Прокрутка к указанному элементу:

element.scrollIntoView(); // элемент окажется вверху страницы
element.scrollIntoView(false); // элемент окажется внизу страницы

Запрет прокрутки

document.body.style.overflow = "hidden"

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

Относительно окна браузера

element.clientX
element.clientY

Прямоугольник, охватывающий элемент:

element.getBoundingClientRect(); // { top, left, right, bottom }

Получение элемента по координатам

document.elementFromPoint(x,y)

Метод возвращает элемент, находящийся на координатах x, y относительно окна браузера.

Относительно страницы

element.pageX
element.pageY

element.pageY = element.clientY + текущая вертикальная прокрутка страницы (pageYOffset).

Относительно экрана

element.screenX
element.screenY

Размеры экрана:

window.screen.width
window.screen.height

Координаты верхнего левого угла браузера:

window.screenX
window.screenY