Содержание:
Размеры окна и позиция прокрутки в JavaScript
В этой теме рассмотрим свойства объекта window, которые предназначены для получения внутренних (innerWidth, innerHeight) и внешних (outerWidth, outerHeight) размеров окна, его положения относительно экрана (screenLeft, screenTop) и координат прокрутки страницы (pageXOffset и pageYOffset) в JavaScript.
Свойства innerWidth и innerHeight
innerWidth – это свойство, которое позволяет получить внутреннюю ширину окна в пикселях (включая при этом в этот размер ширину вертикальной полосы прокрутки при её наличии).
innerHeight, в отличие от innerWidth предназначено соответственно для возвращения внутренней высоты окна в пикселях.
JavaScript
// получим внутреннюю ширину окна в пикселях
const width = window.innerWidth;
// получим внутреннюю высоту окна в пикселях
const height = window.innerHeight;Свойства innerWidth и innerHeight доступны только для чтения и не имеют значения по умолчанию.
Если код выполняется в контексте объекта window, то его свойства и методы можно использовать без указания window:
JavaScript
// получим внутреннюю ширину окна в пикселях
const width = innerWidth;
// получим внутреннюю высоту окна в пикселях
const height = innerHeight;Если вам нужно узнать внутреннюю ширину окна за вычетом ширины его вертикальной полосы прокрутки и любых границ, то используйте свойство clientWidth элемента <html>:
JavaScript
// получим корневой элемент <html>
const $html = document.documentElement;
// узнаем его ширину
const width = $html.clientWidth;Получение внутренней высоты окна без учёта горизонтальной полосы прокрутки и границ выполняется через clientHeight элемента <html>:
JavaScript
// получим корневой элемент <html>
const $html = document.documentElement;
// узнаем его высоту
const width = $html.clientHeight;Пример, в котором мы выведем на страницу данные о внутренних размерах окна:
JavaScript
// ...
window.onresize = () => {
showLog({
innerWidth: innerWidth,
innerHeight: innerHeight,
clientWidth: document.documentElement.clientWidth,
clientHeight: document.documentElement.clientHeight
});
}onresize – это свойство, посредством которого мы назначили обработчик для события resize для window.
outerWidth и outerHeight
Свойства «window.outerWidth» и «window.outerHeight» применяются довольно редко. Они предназначены для получения соответственно ширины и высоты всего окна браузера (включая границы самого окна, панель закладок и т.д.).
Например:
JavaScript
// ширина всего окна браузера
const width = window.outerWidth;
// высота всего окна браузера
const height = window.outerHeight;Пример, в котором мы выведем данные о внешних размерах окна на экран:
JavaScript
// ...
window.onresize = () => {
showLog({
outerWidth: outerWidth,
outerHeight: outerHeight,
innerWidth: innerWidth,
innerHeight: innerHeight
});
}screenX и screenY (screenLeft и screenTop)
«window.screenX» и «window.screenY» предназначены для получения положения окна браузера (т.е. его x и y координат) относительно экрана.
JavaScript
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». Остальные браузеры поддерживает как один, так и другой вариант свойств.
Кроссбраузерное решение:
JavaScript
const screenX = window.screenX ? window.screenX : window.screenLeft;
const screenY = window.screenY ? window.screenY : window.screenTop;Например, выведем координаты окна браузера относительно экрана при клике на ссылку:
JavaScript
// ...
// получим ссылку
const $getScreenXY = document.querySelector('#getScreenXY');
// при клике на ссылку
$getScreenXY.onclick = function (e) {
e.preventDefault();
showLog({
screenX: screenX,
screenY: screenY
});
};scrollX и scrollY (pageXOffset и pageYOffset)
scrollX и scrollY используются, когда нужно получить количество пикселей, на которые документ пролистали в данный момент соответственно по горизонтали и вертикали. Эти свойства доступны только для чтения.
JavaScript
const scrollX = window.scrollX;
const scrollY = window.scrollY;Возвращаемое ими значение является числом с плавающей точкой. Для того чтобы сделать его целочисленным, можно, например, воспользоваться методом Math.round():
JavaScript
const scrollX = Math.round(window.scrollX);
const scrollY = Math.round(window.scrollY);Определить, был ли пролистан контент можно, например так:
JavaScript
const hasScrolling = !(window.scrollX === 0 && window.scrollY === 0);Нахождение в переменной hasScrolling значения false будет говорить о том, что контент в данный момент не пролистан, true – в противном случае.
Пример, в котором мы выведем на экран информацию о значениях прокрутки:
JavaScript
// ...
// назначим обработчик для события 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):
JavaScript
const scrollX = window.scrollX ? window.scrollX : window.pageXOffset;
const scrollY = window.scrollY ? window.scrollY : window.pageYOffset;
Самое интересное делая body margin-left на 100 и проверяя document.body.offsetLeft там тупо 0. Дичь какая-то.