Содержание:
Размеры окна и позиция прокрутки в 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. Дичь какая-то.