Javascript размеры прокрутка и координаты элементов на странице и окна браузера

Обновлено: 03.07.2024

так, чтобы у нас появилась вертикальная полоса прокрутки. И дополнительно выведем в консоль свойства:

Как видите, ширина окна в innerWidth не учитывает полосу прокрутки, а свойство clientWidth – учитывает. Вот этот момент следует иметь в виду при разработке скриптов.

Высота и ширина HTML-документа

Теперь предположим, что мы хотим определить всю ширину и высоту документа, загруженного в браузер. Формально, для этого следует обратиться опять же к тегу-элементу html и просмотреть его свойства scrollWidth/scrollHeight:

Как видите мы получаем вполне корректные значения при наличии прокрутке и при ее отсутствии. Но, к сожалению, не все браузеры адекватно определяют эти свойства при отсутствии полос прокрутки. И на практике программисты поступают так. Для надежного вычисления высоты всего документа, берут максимальное значение из следующих свойств:

Почему это так работает? Думаю, этого никто не знает. И эта проблема наблюдается только для всего документа. Для отдельного элемента все работает через свойства scrollWidth/scrollHeight. А для всей страницы приходится использовать такой своеобразный «костыль» (как говорят программисты). Просто запомните этот момент: для корректного определения высоты (или ширины) всего документа в браузере, нужно брать максимальное значение среди этих свойств (для ширины будут соответствующие свойства, где вместо Height следует записать Width).

Получение текущего положения прокрутки

Далее, чтобы определить положение прокрутки всего документа, можно опять же воспользоваться объектом html и посмотреть значения его свойств scrollLeft/scrollTop, о которых мы говорили на предыдущем занятии. Например, так:

И, в общем то этим можно пользоваться без каких-либо проблем. Но в большинстве старых браузеров это свойство следовало получать при обращении к элементу body так:

window.pageXOffset – смещение документа в окне браузера по оси Ox;
window.pageYOffset – смещение документа в окне браузера по оси Oy.

получаем корректные значения положения скроллинга документа по вертикали. Здесь следует только помнить, что эти свойства доступны только для чтения, так что управлять скроллингом через них не получится.

Прокрутка (скроллинг) документа

Теперь посмотрим, как же все-таки осуществлять прокрутку всего документа. Во-первых, следует помнить, что прокрутка документа работает только после загрузки всей HTML-страницы, когда построено DOM-дерево. До этого рассматриваемые ниже методы скроллинга работать не будут. Так что, вот это имейте в виду.

document.documentElement.scrollTop
document.documentElement.scrollLeft

document.body.scrollTop
document.body.scrollLeft

window.scrollBy(offX, offY) – прокручивает страницу относительно её текущего положения на смещения offX, offY пикселей;
window.scrollTo(pageX, pageY) – прокручивает страницу до указанных координат pageX и pageY.

Например, вот такой скрипт:

будет прокручивать страницу вниз на 5 пикселей каждые 100 мс. А если прописать вот так:

то мы будем все время переходить в одну и ту же позицию на 5 пикселей по вертикальному скроллингу (вручную переводим вниз, он возвращается). И, например, строка:

будет возвращать нас просто к началу документа.

Для полноты картины давайте рассмотрим ещё один метод scrollIntoView, который имеет следующий синтаксис:

Данный метод существует у всех объектов-тегов DOM-дерева и прокручивает документ так, чтобы elem оказался вверху окна браузера (если значение top=true), или внизу, при значении top=false. Пусть, в начале документа имеется заголовок:

и мы хотим прокрутить документ, чтобы он стал виден вверху страницы:

Обратите внимание, что мы вызвали этот метод через планировщик отложенного вызова – функцию setTimeout с нулевой задержкой. Если мы просто в скрипте напишем:

то это работать не будет. Как мы отмечали в самом начале, все методы скроллинга работают после полной загрузки документа и построения DOM-дерева. И, вызывая scrollIntoView через setTimeout, мы как раз и выполняем это условие.

Запрет прокрутки документа

Наконец, бывают ситуации, когда нам нужно запретить прокручивать документ в браузере пользователю. В частности, эта необходимость возникает при отображении какого-либо блока поверх документа и мы не хотим, чтобы при этом работал общий скроллинг. Например, как в этой игре: при отображении блока div, имитирующего диалоговое окно, у всего документа отсутствуют полосы прокрутки.

Это делается очень простой конструкцией:

И теперь, при обновлении документа у нас пропадает вертикальная полоса прокрутки. Для восстановления полос, свойство overflow нужно сбросить, присвоив ей пустую строку:

Итак, на этом занятии мы с вами рассмотрели способы определения размеров клиентского окна браузера, HTML-документа в целом и способы его прокрутки.

Видео по теме

© 2021 Частичное или полное копирование информации с данного сайта для распространения на других ресурсах, в том числе и бумажных, строго запрещено. Все тексты и изображения являются собственностью сайта

Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.

Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.

Однако во всевозможных доступных размерах легко запутаться: существуют размеры экрана, окна, веб-страницы и т.д.

Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.

1. Экран

1.1. Размер экрана

Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.

Получить информацию о размере экрана можно с помощью свойства screen объекта window :

1.2. Доступный размер экрана

Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.

Для получения доступного размера экрана снова обращаемся к window.screen :

2. Окно

2.1. Размер внешнего окна (или внешний размер окна)

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

Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :

2.2. Внутренний размер окна (или размер внутреннего окна)

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

Объект window предоставляет свойства innerWidth и innerHeight :

Если мы хотим получить внутренний размер окна без полос прокрутки, то делаем следующее:

3. Размер веб-страницы

Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).

Для получения размера веб-страницы используйте следующее (включает в себя внутренние отступы страницы, но не включает границы, внешние отступы и полосы прокрутки):

Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.

4. Заключение

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

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

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

В этой теме рассмотрим свойства объекта window, которые предназначены для получения внутренних ( innerWidth , innerHeight ) и внешних ( outerWidth , outerHeight ) размеров окна, его положения относительно экрана ( screenLeft , screenTop ) и координат прокрутки страницы ( pageXOffset и pageYOffset ) в JavaScript.

Свойства innerWidth и innerHeight

innerWidth – это свойство, которое позволяет получить внутреннюю ширину окна в пикселях (включая при этом в этот размер ширину вертикальной полосы прокрутки при её наличии).

innerHeight , в отличие от innerWidth предназначено соответственно для возвращения внутренней высоты окна в пикселях.

Свойства innerWidth и innerHeight доступны только для чтения и не имеют значения по умолчанию.

Если код выполняется в контексте объекта window , то его свойства и методы можно использовать без указания window :

Если вам нужно узнать внутреннюю ширину окна за вычетом ширины его вертикальной полосы прокрутки и любых границ, то используйте свойство clientWidth элемента <html> :

Получение внутренней высоты окна без учёта горизонтальной полосы прокрутки и границ выполняется через clientHeight элемента <html> :

Пример, в котором мы выведем на страницу данные о внутренних размерах окна:

onresize – это свойство, посредством которого мы назначили обработчик для события resize для window .

outerWidth и outerHeight

Свойства « window.outerWidth » и « window.outerHeight » применяются довольно редко. Они предназначены для получения соответственно ширины и высоты всего окна браузера (включая границы самого окна, панель закладок и т.д.).

Пример, в котором мы выведем данные о внешних размерах окна на экран:

screenX и screenY (screenLeft и screenTop)

« window.screenX » и « window.screenY » предназначены для получения положения окна браузера (т.е. его x и y координат) относительно экрана.

В Internet Explorer 8 и более ранних версиях, объект window не содержит свойств screenX и screenY . В них это выполняется через « window.screenLeft » и « window.screenTop ». В то же время Mozilla Firefox (до версии 64) поддерживает только « window.screenX » и « window.screenY ». Остальные браузеры поддерживает как один, так и другой вариант свойств.

Например, выведем координаты окна браузера относительно экрана при клике на ссылку:

scrollX и scrollY (pageXOffset и pageYOffset)

scrollX и scrollY используются, когда нужно получить количество пикселей, на которые документ пролистали в данный момент соответственно по горизонтали и вертикали. Эти свойства доступны только для чтения.

Возвращаемое ими значение является числом с плавающей точкой. Для того чтобы сделать его целочисленным, можно, например, воспользоваться методом Math.round() :

Определить, был ли пролистан контент можно, например так:

Нахождение в переменной hasScrolling значения false будет говорить о том, что контент в данный момент не пролистан, true – в противном случае.

Пример, в котором мы выведем на экран информацию о значениях прокрутки:

onscroll – это свойство, посредством которого мы назначили обработчик для события scroll для window .

Свойства pageXOffset и pageYOffset идентичны соответственно scrollX и scrollY .

Координаты курсора мышки относительно экрана монитора, страницы или окна браузера

экрана монитора ( screenX / Y ),
HTML-дкумента ( pageX / Y ),
области просмотра окна браузера ( clientX / Y ).

Образец (щелчок по любому месту зелёного прямоугольника):

Определить элемент, который находится под курсором

document.elementFromPoint( X , Y ) возвращает верхний элемент, который находится на координатах ( X , Y ) относительно верхнего левого угла области просмотра окна браузера.

Образец (щелчок по любому месту зелёного прямоугольника):

Курсор находится над тегом
первый второй ~~третий~~

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

Координаты курсора мышки внутри элемента (div, img)

В Mozilla Firefox не работают offsetX и offsetY . Самое простое решение проблемы указано тут:

Образец (щелчок по любому месту зелёного прямоугольника):

Координаты расположения элемента

Расстояние от верхнего/левого края окна браузера до элемента

Метод elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера

Образец (прокрутка или изменение окна браузера, изменение размера элемента):

Расстояние от правого/нижнего края окна браузера до элемента

Чтобы узнать отступ справа или снизу от элемента до края области просмотра окна браузера:

Образец (прокрутка или изменение окна браузера, изменение размера элемента):

Позиция одного элемента относительно другого

Рассчитать позицию одного элемента относительно другого (например, потомка относительно предка) можно, если получить разницу их координат (например, координаты родителя вычесть из координат дочернего элемента):

Смещение относительно elem.offsetParent

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

Получить значение свойства CSS можно благодаря getComputedStyle(elem[, pseudo]) . Предварительно советую ознакомиться с блочной моделью CSS.

Образец (щелчок по прямоугольнику с серой рамкой, его изменение или прокрутка содержимого):

Размер монитора, страницы, окна браузера: ширина, высота, прокрутка

Размер страницы, учитывающий transform и margin для <html> , который можно получить, пока страница не была прокручена.

Читайте также: