Размеры окон и скролинг в javascript (js width height)

Поиск размера окна браузера

В этой статье рассмотрим методы, позволяющие определить ширину окна браузера, высоту всей страницы, сроллинг страницы с помощью javascript (js width height).

document.documentElement - объект, хранящий в себе всю информацию об html элементе. У этого объекта, который соответствует тегу, присутствуют свои метрики и свойства, которые дают нам возможность получать данные о размерах элементов, и, так-же, о размерах окна браузера.

Width Height
Для определения видимой высоты и ширины окна браузера используют свойства clientHeight и clientWidth объекта document.documentElement
Ниже пример кода, который выведет нам данные о высоте видимой части окна:
alert(document.documentElement.clientHeight, document.documentElement.clientWidth)

Свойства clientWidth и clientHeight, при наличии скрола, возвращают ширину или высоту, соответственно, внутри него, а window.innerWidth и window.innerHeight не учитывает скрол, игнорируя его.

Если часть окна браузера справа или снизу занимает скролл, то и данные мы получим разные:
alert( window.innerHeight ); // общая ширина окна
alert( document.documentElement.clientWidth ); // ширина окна, без учета прокрутки

Чаще всего используется document.documentElement.clientWidth, т.к. требуется получить общую видимую ширину окна, не учитывая скролл.

Высота и Ширина окна браузера с учётом скролла

Итак, document.documentElement.clientWidth и document.documentElement.clientHeight - часть окна, видимая пользователям, без учета скролла, а всё окно - document.documentElement.scrollWidth и document.documentElement.scrollHeight

Это утверждение не всегда верно. У объекта documentElement.clientHeight могут наблюдаться проблемы в браузерах Opera и Chrome/Safari, в некоторых случаях documentElement.scrollHeight может быть меньше, чем documentElement.clientHeight 

Для точного определения нужных Вам размеров используется такая структура:
var scrollHeight = Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.body.clientHeight,
    document.documentElement.clientHeight
); 

Получение и изменение данных прокрутки scrollTop и scrollLeft

У всех элементов, кроме всей страницы, позиция текущей прокрутки храниться в свойствах scrollTop и scrollLeft
Но с оперой и хромом можем получить неправильные данные. Для получения верных данных требуется использовать свойства объекта window pageXOffset и pageYOffset так - window.pageYOffset
Эти свойства менять нельзя. Для всех браузеров подойдет такой оборот:
var scrollLeftData = window.pageXOffset || document.documentElement.scrollLeft;

Для изменения данных, используется методы window.scrollBy(scrollX, scrollY) и window.scrollTo(scrollX, scrollY)
Нужно учитывать, что скролить страницу нельзя, до полной ее подгрузки.
Если указать нули вместо координат - мы попадём в начало страницы.



Возврат к списку

10
3.71