Html window height javascript

Window: innerHeight property

The read-only innerHeight property of the Window interface returns the interior height of the window in pixels, including the height of the horizontal scroll bar, if present.

The value of innerHeight is taken from the height of the window’s layout viewport. The width can be obtained using the innerWidth property.

Value

An integer value indicating the window’s layout viewport height in pixels. The property is read only and has no default value.

To change the width of the window, call one of its resize methods, such as resizeTo() or resizeBy() .

Usage notes

To obtain the height of the window minus its horizontal scroll bar and any borders, use the root element’s clientHeight property instead.

Both innerHeight and innerWidth are available on any window or any object that behaves like a window, such as a tab or frame.

Examples

Assuming a frameset

.log(window.innerHeight); // or console.log(self.innerHeight); // will log the height of the frame viewport within the frameset console.log(parent.innerHeight); // will log the height of the viewport of the closest frameset console.log(top.innerHeight); // will log the height of the viewport of the outermost frameset 

To change the size of a window, see window.resizeBy() and window.resizeTo() .

To get the outer height of a window, i.e. the height of the whole browser window, see window.outerHeight .

Graphical example

The following figure shows the difference between outerHeight and innerHeight .

Demo

HTML

p>Resize the browser window to fire the code>resizecode> event.p> p>Window height: span id="height">span>p> p>Window width: span id="width">span>p> 

JavaScript

const heightOutput = document.querySelector("#height"); const widthOutput = document.querySelector("#width"); function updateSize()  heightOutput.textContent = window.innerHeight; widthOutput.textContent = window.innerWidth; > updateSize(); window.addEventListener("resize", updateSize); 

Result

Specifications

Источник

Размеры и прокрутка окна

Как узнать ширину и высоту окна браузера? Как получить полную ширину и высоту документа, включая прокрученную часть? Как прокрутить страницу с помощью JavaScript?

Для большинства таких запросов мы можем использовать корневой элемент документа document.documentElement , который соответствует тегу . Однако есть дополнительные методы и особенности, которые необходимо учитывать.

Ширина/высота окна

Чтобы получить ширину/высоту окна, можно взять свойства clientWidth/clientHeight из document.documentElement :

Например, эта кнопка показывает высоту вашего окна:

Браузеры также поддерживают свойства window.innerWidth/innerHeight . Вроде бы, похоже на то, что нам нужно. Почему же не использовать их?

Если есть полоса прокрутки, и она занимает какое-то место, то свойства clientWidth/clientHeight указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого.

А window.innerWidth/innerHeight включают в себя полосу прокрутки.

Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения:

alert( window.innerWidth ); // полная ширина окна alert( document.documentElement.clientWidth ); // ширина окна за вычетом полосы прокрутки

В большинстве случаев нам нужна доступная ширина окна: для рисования или позиционирования. Полоса прокрутки «отъедает» её часть. Поэтому следует использовать documentElement.clientHeight/Width .

Обратите внимание, что геометрические свойства верхнего уровня могут работать немного иначе, если в HTML нет . Возможны странности.

В современном HTML мы всегда должны указывать DOCTYPE .

Ширина/высота документа

Теоретически, т.к. корневым элементом документа является documentElement , и он включает в себя всё содержимое, мы можем получить полный размер документа как documentElement.scrollWidth/scrollHeight .

Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то documentElement.scrollHeight может быть даже меньше, чем documentElement.clientHeight ! С точки зрения элемента это невозможная ситуация.

Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств:

let scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight ); alert('Полная высота документа с прокручиваемой частью: ' + scrollHeight);

Почему? Лучше не спрашивайте. Эти несоответствия идут с древних времён. Глубокой логики здесь нет.

Получение текущей прокрутки

Обычные элементы хранят текущее состояние прокрутки в elem.scrollLeft/scrollTop .

Что же со страницей? В большинстве браузеров мы можем обратиться к documentElement.scrollLeft/Top , за исключением основанных на старом WebKit (Safari), где есть ошибка (5991), и там нужно использовать document.body вместо document.documentElement .

К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств window.pageXOffset/pageYOffset :

alert('Текущая прокрутка сверху: ' + window.pageYOffset); alert('Текущая прокрутка слева: ' + window.pageXOffset);

Эти свойства доступны только для чтения.

Прокрутка: scrollTo, scrollBy, scrollIntoView

Для прокрутки страницы из JavaScript её DOM должен быть полностью построен.

Например, если мы попытаемся прокрутить страницу из скрипта, подключенного в , это не сработает.

Обычные элементы можно прокручивать, изменяя scrollTop/scrollLeft .

Мы можем сделать то же самое для страницы в целом, используя document.documentElement.scrollTop/Left (кроме основанных на старом WebKit (Safari), где, как сказано выше, document.body.scrollTop/Left ).

Есть и другие способы, в которых подобных несовместимостей нет: специальные методы window.scrollBy(x,y) и window.scrollTo(pageX,pageY) .

• Метод scrollBy(x,y) прокручивает страницу относительно её текущего положения. Например, scrollBy(0,10) прокручивает страницу на 10px вниз. Кнопка ниже демонстрирует это: window.scrollBy(0,10)
• Метод scrollTo(pageX,pageY) прокручивает страницу на абсолютные координаты (pageX,pageY) . То есть, чтобы левый-верхний угол видимой части страницы имел данные координаты относительно левого верхнего угла документа. Это всё равно, что поставить scrollLeft/scrollTop . Для прокрутки в самое начало мы можем использовать scrollTo(0,0) . window.scrollTo(0,0)

Эти методы одинаково работают для всех браузеров.

scrollIntoView

Для полноты картины давайте рассмотрим ещё один метод: elem.scrollIntoView(top).

Вызов elem.scrollIntoView(top) прокручивает страницу, чтобы elem оказался вверху. У него есть один аргумент:

• если top=true (по умолчанию), то страница будет прокручена, чтобы elem появился в верхней части окна. Верхний край элемента совмещён с верхней частью окна.
• если top=false , то страница будет прокручена, чтобы elem появился внизу. Нижний край элемента будет совмещён с нижним краем окна.

Кнопка ниже прокрутит страницу так, что она сама окажется вверху:

А следующая кнопка прокрутит страницу так, что она сама окажется внизу

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

Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.

Чтобы запретить прокрутку страницы, достаточно установить document.body.style.overflow = «hidden» .

Первая кнопка останавливает прокрутку, вторая возобновляет её.

Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для document.body .

Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.

Это выглядит немного странно, но это можно обойти, если сравнить clientWidth до и после остановки, и если clientWidth увеличится (значит полоса прокрутки исчезла), то добавить padding в document.body вместо полосы прокрутки, чтобы оставить ширину содержимого прежней.

Итого

• Ширина/высота видимой части документа (ширина/высота области содержимого): document.documentElement.clientWidth/Height
• Ширина/высота всего документа со всей прокручиваемой областью страницы:

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

• Прокрутку окна можно получить так: window.pageYOffset/pageXOffset .
• Изменить текущую прокрутку:
  • window.scrollTo(pageX,pageY) – абсолютные координаты,
  • window.scrollBy(x,y) – прокрутка относительно текущего места,
  • elem.scrollIntoView(top) – прокрутить страницу так, чтобы сделать elem видимым (выровнять относительно верхней/нижней части окна).

  Источник

  Как получить размеры экрана, окна и веб-страницы в 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. Заключение

  Надеюсь, теперь Вы понимаете, как получать различные размеры.

  Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.

  Внешний размер окна — это размер активного окна браузера (включая поисковую строку, панель вкладок, открытые боковые панели и проч.), а внутренний размер окна — это размер области просмотра.

  Наконец, размер веб-страницы — это размер контента.

  Благодарю за внимание, друзья!

  Источник