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

offsetParent — ссылка на родительский по отображению элемент (для элементов с абсолютным позиционированием таким элементом будет ближайший по иерархии объект с относительным позиционирование, а не непосредственный родитель).
offsetLeft/offsetTop — смещение относительно offsetParent
offsetWidth/offsetHeight — внешние размеры элемента (включая рамку)

clientTop/clientLeft — ширина отступа внутренней части элемента от внешней (ширина рамки border)
clientWidth/clientHeight — размеры элемента внутри рамки (с полями, без прокрутки)
scrollWidth/scrollHeight — учитывают прокрученную область (которую не видно)
scrollLeft/scrollTop — текущая прокрутка — невидимая уже прокрученная область — эти значения можно изменять

Для документа

document.documentElement.clientWidth/Height — ширина и высота видимой области окна
window.innerWidth/window.innerHeight — текущий размер окна браузера (с прокруткой)

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

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

window.pageXOffset/window.pageYOffset — текущая прокрутка страницы

Изменение прокрутки

window.scrollBy(x,y) — прокрутка относительно текущих координат, т.е. на x пикселей вправо, на y пикселей вниз.
window.scrollTo(pageX, pageY) — прокрутка к указанным координатам относительно документа.
element.scrollIntoView() — прокручивает страницу так, чтобы элемент оказался вверху
element.scrollIntoView(false) — элемент оказывается внизу.

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

document.body.style.overflow = "hidden"

Координаты

clientX/clientY — относительно окна браузера:
element.getBoundingClientRect() — координаты прямоугольника, охватывающего элемент — возвращает объект со свойствами top, left, right, bottom
document.elementFromPoint(x,y) — возвращает элемент, находящийся на координатах x, y относительно окна

pageX/pageY — относительно документа
pagyY = clientY + текущая вертикальная прокрутка(pageYOffset)

screenX/screenY — относительно экрана
размеры экрана храняется в глобальной переменной screen screen.width, screen.height
window.screenX, window.screenY — координаты левого верхнего угла браузера

0 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован