Как сделать окно определенного размера html

Обновлено: 22.04.2024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Прокрутка: 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 вниз.

Кнопка ниже демонстрирует это:

Метод scrollTo(pageX,pageY) прокручивает страницу на абсолютные координаты (pageX,pageY) . То есть, чтобы левый-верхний угол видимой части страницы имел данные координаты относительно левого верхнего угла документа. Это всё равно, что поставить scrollLeft/scrollTop . Для прокрутки в самое начало мы можем использовать 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

В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах. Пиксел — это элементарная точка на экране монитора, является относительной единицей измерения, ее величина зависит от установленного экранного разрешения и размера монитора. Возьмем, к примеру, популярное разрешение монитора 1024х768 пикселов. Картинка с такими же размерами будет занимать всю область экрана. Увеличив разрешение монитора до 1280х1024, мы, тем самым, уменьшим размеры изображения на экране.

При использовании пикселов в качестве значений пишется только число без указания единиц, например: width="380" . В примере 6.2 приведено добавление изображения с заданными размерами.

Пример 6.2. Размеры изображения в пикселах

В данном примере рисунок имеет ширину 100 пикселов ( width="100" ), высоту 111 пикселов ( height="111" ), горизонтальный и вертикальный отступ по 4 пиксела ( hspace и vspace ) и толщину границы вокруг картинки 2 пиксела ( border="2" ).

Процентная запись удачно дополняет пикселы, поскольку позволяет привязаться к размерам определенного элемента, к примеру, окна браузера. Так, если задать у картинки ширину 100%, то рисунок будет заполнять все свободное пространство окна по ширине. Браузер понимает, что речь идет о процентах, если после числа добавляется символ %, например: width="40%" .

Размеры допустимо задавать только в целых числах. Это правило относится как к пикселам, так и процентам.

Учтите, что размер в процентах вычисляется от размеров родительского элемента, иными словами, контейнера, внутри которого располагается элемент. Если родитель явно не задан, тогда за отсчет принимается окно браузера. В примере 6.3 приведен код веб-страницы, в котором ширина элементов задается в процентах.

Пример 6.3. Размеры изображения в процентах

В данном примере ширина картинки задана как 100%, при этом высота изображения явно не задается, поскольку она вычисляется автоматически. Вид страницы при таких размерах картинки показан на рис. 6.3.

Рис. 6.3. Изображение с шириной 100%

Обратите внимание, что в изображении появляются заметные искажения, это связано с увеличением картинки вопреки ее исходным размерам.

Как вы понимаете, ширина окна принимается за 100%, но ее легко превысить, причем ненароком. В частности, стоит только добавить в примере 6.3 к тегу отступы по горизонтали ( hspace="10" ) и ширина изображения станет 100%+20. Это в свою очередь приведет к появлению горизонтальной полосы прокрутки. Учитывайте этот нюанс при установке размеров элементов.

В этой статье рассмотрим, как можно задавать ширину и какими свойствами стоит делать это. Для первого примера возьмём блочный элемент div. По умолчанию он имеет высоту равную нулю (если ничего не содержит) и занимает 100% ширины родительского элемента. Попробуем задать ему ширину в 200 пикселей и высоту в 150. Для этого используем CSS свойства width (ширина) и height (высота): Получится такой результат: Можно задавать ширину не только в пикселях, но и в процентах от ширины родительского элемента. Попробуем сделать это: Получится такой результат: К сожалению, задать высоту для блочного элемента в процентах не получится. Если написать "height:50%;", то в разных браузерах будет диаметрально противоположный результат, поэтому лучше считать такую запись ошибкой.

Только у одного элемента можно задать свойство height в процентах, а точнее у псевдоэлементов :before и ::after. Читайте о них в статье Псевдоэлементы (:before, ::after)

Максимальная и минимальная ширина (max-width и min-width)

Жёсткое ограничение ширины - это не лучший способ строить сайт. Потому что в таком случае появятся проблемы с адаптацией под мобильные и планшеты: ширина экрана может быть меньше ширины блока. Тогда часть сайта будет выходить пределы вёрстки сайта и появится горизонтальная прокрутка, чего у версии сайта на мобильном быть не должно. Поэтому вместо жёсткого задания ширины используется ограничение сверху через CSS свойство max-width. Мы знаем, что блочный элемент div пытается занять всю ширину родительского элемента, как будто по умолчанию у него есть свойство width и оно имеет значение 100%. Результат будет аналогичен предыдущему примеру: Но теперь, если вы возьмёте окно своего браузера и сузите до 400 пикселей и меньше, то увидите как контейнер div уменьшает свои размеры, чтобы не выпрыгивать за пределы вёрстки. Если же изменить "max-width:400px;" на "width:400px", то блок будет выходить за пределы родительского элемента: По смыслу свойство min-width является диаметрально противоположным к max-width. Оно ограничивает минимальную ширину элемента, но не ограничивает максимальную.

Максимальная и минимальная высота (max-height и min-height)

Для блока div можно задать максимальную высоту. Это делается в том случае, если контента в блоке будет слишком много и есть вероятность, что он испортит вёрстку сайта. Ведь у контейнера div высота изменяется автоматически в зависимости от того, сколько занимает места его дочерние элементы.

По смыслу свойство min-height является диаметрально противоположным к max-height. Оно ограничивает минимальную высоту элемента, но не ограничивает максимальную.

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

Как видите, ширина окна в 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-документа в целом и способы его прокрутки.

Видео по теме

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

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

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

С точки зрения HTML, документ – это document.documentElement . У этого элемента, соответствующего тегу , есть все стандартные свойства и метрики и, в теории, они и должны нам помочь. Однако, на практике есть ряд нюансов, именно их мы рассмотрим в этой главе.

Ширина/высота видимой части окна

Свойства clientWidth/Height для элемента document.documentElement – это как раз ширина/высота видимой области окна.

Например, кнопка ниже выведет размер такой области для этой страницы:

В чём отличие? Оно небольшое, но чрезвычайно важное.

Свойства clientWidth/Height , если есть полоса прокрутки, возвращают именно ширину/высоту внутри неё, доступную для документа, а window.innerWidth/Height – игнорируют её наличие.

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

Обычно нам нужна именно доступная ширина окна, например, чтобы нарисовать что-либо, то есть за вычетом полосы прокрутки. Поэтому используем documentElement.clientWidth .

Ширина/высота страницы с учётом прокрутки

Теоретически, видимая часть страницы – это documentElement.clientWidth/Height , а полный размер с учётом прокрутки – по аналогии, documentElement.scrollWidth/scrollHeight .

Это верно для обычных элементов.

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

Эта проблема возникает именно для documentElement , то есть для всей страницы.

Надёжно определить размер страницы с учётом прокрутки можно, взяв максимум из нескольких свойств:

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

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

У обычного элемента текущую прокрутку можно получить в scrollLeft/scrollTop .

Что же со страницей?

Большинство браузеров корректно обработает запрос к documentElement.scrollLeft/Top , однако Safari/Chrome/Opera есть ошибки (к примеру 157855, 106133), из-за которых следует использовать document.body .

Чтобы вообще обойти проблему, можно использовать специальные свойства window.pageXOffset/pageYOffset :

Кросс-браузерный вариант с учётом IE8 предусматривает откат на documentElement :

Изменение прокрутки: scrollTo, scrollBy, scrollIntoView

Чтобы прокрутить страницу при помощи JavaScript, её DOM должен быть полностью загружен.

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

Никто не мешает точно так же поступать и со страницей. Во всех браузерах, кроме Chrome/Safari/Opera можно осуществить прокрутку установкой document.documentElement.scrollTop , а в указанных – использовать для этого document.body.scrollTop . И будет работать. Можно попробовать прокручивать и так и эдак и проверять, подействовала ли прокрутка, будет кросс-браузерно.

Но есть и другое, простое и универсальное решение – специальные методы прокрутки страницы window.scrollBy(x,y) и window.scrollTo(pageX,pageY).

Метод scrollBy(x,y) прокручивает страницу относительно текущих координат.

Например, кнопка ниже прокрутит страницу на 10px вниз:

Метод scrollTo(pageX,pageY) прокручивает страницу к указанным координатам относительно документа.

Он эквивалентен установке свойств scrollLeft/scrollTop .

Чтобы прокрутить в начало документа, достаточно указать координаты (0,0) .

scrollIntoView

Для полноты картины рассмотрим также метод elem.scrollIntoView(top).

Метод elem.scrollIntoView(top) вызывается на элементе и прокручивает страницу так, чтобы элемент оказался вверху, если параметр top равен true , и внизу, если top равен false . Причём, если параметр top не указан, то он считается равным true .

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

А следующая кнопка прокрутит страницу так, чтобы кнопка оказалась внизу:

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

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

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

При этом страница замрёт в текущем положении.

При нажатии на верхнюю кнопку страница замрёт на текущем положении прокрутки. После нажатия на нижнюю – прокрутка возобновится.

Вместо document.body может быть любой элемент, прокрутку которого необходимо запретить.

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

Итого

Для получения размеров видимой части окна: document.documentElement.clientWidth/Height

Для получения размеров страницы с учётом прокрутки:

Прокрутка окна:

На всякий случай – вот самый кросс-браузерный способ, учитывающий IE7- в том числе:

Установить прокрутку можно при помощи специальных методов:

window.scrollTo(pageX,pageY) – абсолютные координаты,
window.scrollBy(x,y) – прокрутить относительно текущего места.
elem.scrollIntoView(top) – прокрутить, чтобы элемент elem стал виден.

Задачи

Полифилл для pageYOffset в IE8

Обычно в IE8 не поддерживается свойство pageYOffset . Напишите полифилл для него.

При подключённом полифилле такой код должен работать в IE8:

В стандартном режиме IE8 можно получить текущую прокрутку так:

Самым простым, но неверным было бы такое решение:

Код выше не учитывает текущую прокрутку. Он присваивает window.pageYOffset текущую прокрутку, но при её изменении – не обновляет это свойство автоматически, а поэтому – бесполезен.

Более правильное решение – сделать это свойство геттером. При этом в IE8 для DOM-объектов работает Object.defineProperty :

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