Как получить размеры экрана, окна и веб-страницы в JavaScript?
Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.
Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.
Однако во всевозможных доступных размерах легко запутаться: существуют размеры экрана, окна, веб-страницы и т.д.
Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.
1. Экран
1.1. Размер экрана
Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.
Получить информацию о размере экрана можно с помощью свойства screen объекта window :
const screenWidth = window.screen.width const screenHeight = window.screen.height 1.2. Доступный размер экрана
Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.
Для получения доступного размера экрана снова обращаемся к window.screen :
const availableScreenWidth = window.screen.availWidth const availableScreenHeight = window.screen.availHeight 2. Окно
2.1. Размер внешнего окна (или внешний размер окна)
Размер внешнего окна — это ширина и высота текущего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.
Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :
const windowOuterWidth = window.outerWidth const windowOuterHeight = window.outerHeight 2.2. Внутренний размер окна (или размер внутреннего окна)
Внутренний размер окна — это ширина и высота области просмотра (вьюпорта).
Объект window предоставляет свойства innerWidth и innerHeight :
const windowInnerWidth = window.innerWidth const windowInnerHeight = window.innerHeight Если мы хотим получить внутренний размер окна без полос прокрутки, то делаем следующее:
const windowInnerWidth = document.documentElement.clientWidth const windowInnerHeight = document.documentElement.clientHeight 3. Размер веб-страницы
Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).
Для получения размера веб-страницы используйте следующее (включает в себя внутренние отступы страницы, но не включает границы, внешние отступы и полосы прокрутки):
const pageWidth = document.documentElement.scrollWidth const pageHeight = document.documentElement.scrollHeight Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.
4. Заключение
Надеюсь, теперь Вы понимаете, как получать различные размеры.
Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.
Внешний размер окна — это размер активного окна браузера (включая поисковую строку, панель вкладок, открытые боковые панели и проч.), а внутренний размер окна — это размер области просмотра.
Наконец, размер веб-страницы — это размер контента.
Благодарю за внимание, друзья!
Размеры и скорллинг HTML-документа
так, чтобы у нас появилась вертикальная полоса прокрутки. И дополнительно выведем в консоль свойства:
console.log(window.innerWidth, window.innerHeight);
Как видите, ширина окна в innerWidth не учитывает полосу прокрутки, а свойство clientWidth – учитывает. Вот этот момент следует иметь в виду при разработке скриптов.
Высота и ширина HTML-документа
Теперь предположим, что мы хотим определить всю ширину и высоту документа, загруженного в браузер. Формально, для этого следует обратиться опять же к тегу-элементу html и просмотреть его свойства scrollWidth/scrollHeight:
let html = document.documentElement; console.log(html.scrollWidth, html.scrollHeight);
Как видите мы получаем вполне корректные значения при наличии прокрутке и при ее отсутствии. Но, к сожалению, не все браузеры адекватно определяют эти свойства при отсутствии полос прокрутки. И на практике программисты поступают так. Для надежного вычисления высоты всего документа, берут максимальное значение из следующих свойств:
let scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight ); console.log(scrollHeight);
Почему это так работает? Думаю, этого никто не знает. И эта проблема наблюдается только для всего документа. Для отдельного элемента все работает через свойства scrollWidth/scrollHeight. А для всей страницы приходится использовать такой своеобразный «костыль» (как говорят программисты). Просто запомните этот момент: для корректного определения высоты (или ширины) всего документа в браузере, нужно брать максимальное значение среди этих свойств (для ширины будут соответствующие свойства, где вместо Height следует записать Width).
Получение текущего положения прокрутки
Далее, чтобы определить положение прокрутки всего документа, можно опять же воспользоваться объектом html и посмотреть значения его свойств scrollLeft/scrollTop, о которых мы говорили на предыдущем занятии. Например, так:
let html = document.documentElement; console.log(body.scrollTop);
И, в общем то этим можно пользоваться без каких-либо проблем. Но в большинстве старых браузеров это свойство следовало получать при обращении к элементу body так:
console.log(document.body.scrollTop);
- window.pageXOffset – смещение документа в окне браузера по оси Ox;
- window.pageYOffset – смещение документа в окне браузера по оси Oy.
console.log(window.pageYOffset);
получаем корректные значения положения скроллинга документа по вертикали. Здесь следует только помнить, что эти свойства доступны только для чтения, так что управлять скроллингом через них не получится.
Прокрутка (скроллинг) документа
- document.documentElement.scrollTop
- document.documentElement.scrollLeft
- document.body.scrollTop
- document.body.scrollLeft
- window.scrollBy(offX, offY) – прокручивает страницу относительно её текущего положения на смещения offX, offY пикселей;
- window.scrollTo(pageX, pageY) – прокручивает страницу до указанных координат pageX и pageY.
setInterval(function() { window.scrollBy(0, 5); }, 100);
setInterval(function() { window.scrollTo(0, 5); }, 100);
то мы будем все время переходить в одну и ту же позицию на 5 пикселей по вертикальному скроллингу (вручную переводим вниз, он возвращается). И, например, строка:
будет возвращать нас просто к началу документа. Для полноты картины давайте рассмотрим ещё один метод scrollIntoView, который имеет следующий синтаксис: elem.scrollIntoView(top = true); Данный метод существует у всех объектов-тегов DOM-дерева и прокручивает документ так, чтобы elem оказался вверху окна браузера (если значение top=true), или внизу, при значении top=false. Пусть, в начале документа имеется заголовок:
h1 id="header_1">Список свойств метрикиh1> setTimeout(function() { header_1.scrollIntoView(); });
Обратите внимание, что мы вызвали этот метод через планировщик отложенного вызова – функцию setTimeout с нулевой задержкой. Если мы просто в скрипте напишем:
то это работать не будет. Как мы отмечали в самом начале, все методы скроллинга работают после полной загрузки документа и построения DOM-дерева. И, вызывая scrollIntoView через setTimeout, мы как раз и выполняем это условие.
Запрет прокрутки документа
Наконец, бывают ситуации, когда нам нужно запретить прокручивать документ в браузере пользователю. В частности, эта необходимость возникает при отображении какого-либо блока поверх документа и мы не хотим, чтобы при этом работал общий скроллинг. Например, как в этой игре: при отображении блока div, имитирующего диалоговое окно, у всего документа отсутствуют полосы прокрутки. Это делается очень простой конструкцией:
document.body.style.overflow = "hidden";
И теперь, при обновлении документа у нас пропадает вертикальная полоса прокрутки. Для восстановления полос, свойство overflow нужно сбросить, присвоив ей пустую строку:
document.body.style.overflow = "";
Итак, на этом занятии мы с вами рассмотрели способы определения размеров клиентского окна браузера, HTML-документа в целом и способы его прокрутки.