Размеры окна и позиция прокрутки в JavaScript

В этой теме рассмотрим свойства объекта window, которые предназначены для получения внутренних (innerWidth
, innerHeight
) и внешних (outerWidth
, outerHeight
) размеров окна, его положения относительно экрана (screenLeft
, screenTop
) и координат прокрутки страницы (pageXOffset
и pageYOffset
) в JavaScript.
Свойства innerWidth и innerHeight
innerWidth
– это свойство, которое позволяет получить внутреннюю ширину окна в пикселях (включая при этом в этот размер ширину вертикальной полосы прокрутки при её наличии).
innerHeight
, в отличие от innerWidth
предназначено соответственно для возвращения внутренней высоты окна в пикселях.
// получим внутреннюю ширину окна в пикселях const width = window.innerWidth; // получим внутреннюю высоту окна в пикселях const height = window.innerHeight;
Свойства innerWidth
и innerHeight
доступны только для чтения и не имеют значения по умолчанию.
Если код выполняется в контексте объекта window
, то его свойства и методы можно использовать без указания window
:
// получим внутреннюю ширину окна в пикселях const width = innerWidth; // получим внутреннюю высоту окна в пикселях const height = innerHeight;
Если вам нужно узнать внутреннюю ширину окна за вычетом ширины его вертикальной полосы прокрутки и любых границ, то используйте свойство clientWidth
элемента <html>
:
// получим корневой элемент <html> const $html = document.documentElement; // узнаем его ширину const width = $html.clientWidth;
Получение внутренней высоты окна без учёта горизонтальной полосы прокрутки и границ выполняется через clientHeight
элемента <html>
:
// получим корневой элемент <html> const $html = document.documentElement; // узнаем его высоту const width = $html.clientHeight;
Пример, в котором мы выведем на страницу данные о внутренних размерах окна:

// ... window.onresize = () => { showLog({ innerWidth: innerWidth, innerHeight: innerHeight, clientWidth: document.documentElement.clientWidth, clientHeight: document.documentElement.clientHeight }); }
onresize
– это свойство, посредством которого мы назначили обработчик для события resize
для window
.
outerWidth и outerHeight
Свойства «window.outerWidth
» и «window.outerHeight
» применяются довольно редко. Они предназначены для получения соответственно ширины и высоты всего окна браузера (включая границы самого окна, панель закладок и т.д.).
Например:
// ширина всего окна браузера const width = window.outerWidth; // высота всего окна браузера const height = window.outerHeight;
Пример, в котором мы выведем данные о внешних размерах окна на экран:

// ... window.onresize = () => { showLog({ outerWidth: outerWidth, outerHeight: outerHeight, innerWidth: innerWidth, innerHeight: innerHeight }); }
screenX и screenY (screenLeft и screenTop)
«window.screenX
» и «window.screenY
» предназначены для получения положения окна браузера (т.е. его x и y координат) относительно экрана.
const screenX = window.screenX; const screenY = window.screenY;
В Internet Explorer 8 и более ранних версиях, объект window
не содержит свойств screenX
и screenY
. В них это выполняется через «window.screenLeft
» и «window.screenTop
». В то же время Mozilla Firefox (до версии 64) поддерживает только «window.screenX
» и «window.screenY
». Остальные браузеры поддерживает как один, так и другой вариант свойств.
Кроссбраузерное решение:
const screenX = window.screenX ? window.screenX : window.screenLeft; const screenY = window.screenY ? window.screenY : window.screenTop;
Например, выведем координаты окна браузера относительно экрана при клике на ссылку:

// ... // получим ссылку const $getScreenXY = document.querySelector('#getScreenXY'); // при клике на ссылку $getScreenXY.onclick = function (e) { e.preventDefault(); showLog({ screenX: screenX, screenY: screenY }); };
scrollX и scrollY (pageXOffset и pageYOffset)
scrollX
и scrollY
используются, когда нужно получить количество пикселей, на которые документ пролистали в данный момент соответственно по горизонтали и вертикали. Эти свойства доступны только для чтения.
const scrollX = window.scrollX; const scrollY = window.scrollY;
Возвращаемое ими значение является числом с плавающей точкой. Для того чтобы сделать его целочисленным, можно, например, воспользоваться методом Math.round()
:
const scrollX = Math.round(window.scrollX); const scrollY = Math.round(window.scrollY);
Определить, был ли пролистан контент можно, например так:
const hasScrolling = !(window.scrollX === 0 && window.scrollY === 0);
Нахождение в переменной hasScrolling
значения false
будет говорить о том, что контент в данный момент не пролистан, true
– в противном случае.
Пример, в котором мы выведем на экран информацию о значениях прокрутки:

// ... // назначим обработчик для события scroll window.onscroll = () => { const hasScrolling = !(window.scrollX === 0 && window.scrollY === 0); showLog({ hasScrolling: hasScrolling, scrollX: Math.round(scrollX), scrollY: Math.round(scrollY) }); }
onscroll
– это свойство, посредством которого мы назначили обработчик для события scroll
для window
.
Свойства pageXOffset
и pageYOffset
идентичны соответственно scrollX
и scrollY
.
Кроссбраузерное решение (в браузерах в которых не поддерживаются свойства window.scrollX
и window.scrollY
будут использоваться window.pageXOffset
и window.pageYOffset
):
const scrollX = window.scrollX ? window.scrollX : window.pageXOffset; const scrollY = window.scrollY ? window.scrollY : window.pageYOffset;
Самое интересное делая body margin-left на 100 и проверяя document.body.offsetLeft там тупо 0. Дичь какая-то.