Размеры и прокрутка окна
Как узнать ширину и высоту окна браузера? Как получить полную ширину и высоту документа, включая прокрученную часть? Как прокрутить страницу с помощью JavaScript?
Для большинства таких запросов мы можем использовать корневой элемент документа document.documentElement , который соответствует тегу . Однако есть дополнительные методы и особенности, которые необходимо учитывать.
Ширина/высота окна
Чтобы получить ширину/высоту окна, можно взять свойства clientWidth/clientHeight из document.documentElement :
Например, эта кнопка показывает высоту вашего окна:
Не window.innerWidth/Height
Браузеры также поддерживают свойства window.innerWidth/innerHeight . Вроде бы, похоже на то, что нам нужно. Почему же не использовать их?
Если есть полоса прокрутки, и она занимает какое-то место, то свойства clientWidth/clientHeight указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого.
А window.innerWidth/innerHeight включают в себя полосу прокрутки.
Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения:
alert( window.innerWidth ); // полная ширина окна alert( document.documentElement.clientWidth ); // ширина окна за вычетом полосы прокруткиВ большинстве случаев нам нужна доступная ширина окна: для рисования или позиционирования. Полоса прокрутки «отъедает» её часть. Поэтому следует использовать documentElement.clientHeight/Width .
DOCTYPE – это важно
Обратите внимание, что геометрические свойства верхнего уровня могут работать немного иначе, если в 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);Эти свойства доступны только для чтения.
В качестве свойств объекта window также доступны scrollX и scrollY
По историческим причинам существует два аналога window.pageXOffset и window.pageYOffset :
- window.pageXOffset – то же самое, что и window.scrollX .
- window.pageYOffset – то же самое, что и window.scrollY .
Прокрутка: 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)
В обоих методах вместо координат также может использоваться объект options , как аргумент:
window.scrollTo(options); window.scrollBy(options);options поддерживает три свойства:
window.scrollTo(< top: 100, left: 0, behavior: "smooth" >);- top – то же самое, что y / pageY
- left – то же самое, что x / pageX
- behavior – определяет, каким образом будет прокручиваться страница:
- «smooth» – плавно (не поддерживается в IE и в старых версиях Safari)
- «instant» – мгновенно
- «auto» – определяется браузером (зависит от CSS-свойства scroll-behavior)
Демонстрация плавной прокрутки страницы:
scrollIntoView
Для полноты картины давайте рассмотрим ещё один метод: elem.scrollIntoView(top).
Вызов elem.scrollIntoView(top) прокручивает страницу, чтобы elem оказался вверху. У него есть один аргумент:
- если top=true (по умолчанию), то страница будет прокручена, чтобы elem появился в верхней части окна. Верхний край элемента совмещён с верхней частью окна.
- если top=false , то страница будет прокручена, чтобы elem появился внизу. Нижний край элемента будет совмещён с нижним краем окна.
Кнопка ниже прокрутит страницу так, что она сама окажется вверху:
А следующая кнопка прокрутит страницу так, что она сама окажется внизу
Как и scrollTo / scrollBy , scrollIntoView также принимает объект options как аргумент (он немного отличается):
this.scrollIntoView(options).options поддерживает три свойства:
this.scrollIntoView(< behavior: "smooth", block: "end", inline: "nearest" >);- behavior – анимация прокрутки ( smooth , instant , auto )
- block – вертикальное выравнивание ( start , center , end , nearest ). Значение по умолчанию: start
- inline – горизонтальное выравнивание ( start , center , end , nearest ). Значение по умолчанию: nearest
Запретить прокрутку
Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.
Чтобы запретить прокрутку страницы, достаточно установить 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 видимым (выровнять относительно верхней/нижней части окна).
Как убрать ограничение на минимальный размер окна?
Допустим, я открываю новую вкладку. Я пытаюсь уменьшить размер окна до определённых значений, но в один момент он останавливается. Окно любой программы можно уменьшить до размера «квадратика», а браузер Chrome не дает возможности сделать окно еще уже. Как обойти это ограничение?
- Вопрос задан более года назад
- 417 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 1В хроме можно открыть панель панель разработчика (нажать F12). Затем показать панель инструментов устройства (Ctrl + Shift + M). В режиме «отзывчивое устройство» можно уменьшать ширину окна на столько на сколько нужно.
Ответ написан более года назад
Qeinzo @Qeinzo Автор вопросаВы не поняли. Мне нужно уменьшить ширину окна самого браузера. Это нужно для того, чтобы куча открытых вкладок поместились на экране.
Qeinzo, нашёл решение?
Qeinzo @Qeinzo Автор вопроса
IBim, нет, не нашел.
Ваш ответ на вопросВойдите, чтобы написать ответ
- Google Chrome
Как диагностировать проблему в браузере? Повреждён профиль?
- 1 подписчик
- 7 часов назад
- 24 просмотра
Как менять размер текста при изменении размера окна?
Для изменения размера текста веб-страницы совместно с окном браузера есть несколько методов. Рассмотрим наиболее популярные.
Использование единиц vw
Размер текста задаётся с помощью свойства font-size, в качестве значения можно указывать разные единицы — пиксели, пункты, миллиметры и др. Единица vw (от англ. viewport width — ширина области просмотра) соответствует 1% от ширины окна браузера, таким образом, при изменении этой ширины будет меняться и размер текста (пример 1).
Пример 1. Использование vw
Размер текста Для педагогов
Современная образовательная парадигма, ратифицируя приоритет личностной ориентации педагогического процесса, в ходе которого осуществляется развитие природных задатков, заложенных в каждом индивидууме, требует переосмысления существующих традиционных форм и методов общеобязательного образования.Результат данного примера показан на рис. 1.
Рис. 1. а — текст на широком окне; б — текст на узком окне
У единицы vw есть несколько недостатков — главное, что текст уменьшается пропорционально вместе с окном и в какой-то момент становится нечитаемым. Это будет особенно заметно на смартфонах, где ширина экрана меньше ширины мониторов. Чтобы установить минимальный размер текста можно воспользоваться функцией calc(), как показано в примере 2.
Пример 2. Использование calc()
Здесь мы смешиваем разные единицы — для заголовка rem и vw, для основного текста пиксели и vw. Использование calc() гарантирует, что текст не станет меньше указанного значения (для заголовка, к примеру, это 1rem).
Использование медиа-запросов
Поскольку единицы vw завязаны на ширину области просмотра, то при увеличении размера окна увеличивается и размер текста. Иногда требуется сделать наоборот — на маленьких экранах показывать большой текст, а на больших экранах, соответственно, маленький текст. Для этого применяются медиа-запросы, они меняют стиль элементов при определённой ширине окна браузера.
Сперва определяем стиль для больших экранов, затем с помощью конструкции @media screen and (max-width: 1024px) задаём стиль для экранов с шириной до 1024 пикселей. Внутри @media пишется размер текста под этот размер. При желании ниже добавляем ещё несколько @media с разными значениями max-width (пример 3).
Пример 3. Использование @media
Размер текста Для педагогов
Современная образовательная парадигма, ратифицируя приоритет личностной ориентации педагогического процесса, в ходе которого осуществляется развитие природных задатков, заложенных в каждом индивидууме, требует переосмысления существующих традиционных форм и методов общеобязательного образования.Размер текста в данном случае будет меняться не плавно, а ступенчато — при достижении указанной ширины окна размер текста уменьшается или увеличивается.
См. также
- @media
- font-size
- Единицы размера в CSS
- Медиа-запросы
- Отзывчивый веб-дизайн
- Размер текста
- Свойства шрифта в CSS
- Функция calc()
- Функция clamp()
- Функция max()
- Функция min()
Как задать минимальную ширину окна браузера CSS?
Я хочу чтобы по достижении минимальной ширины в 320px документ перестал сжиматься и появился горизонтальный скролл. В самом документе есть много элементов, выходящих на его границы, поэтому body
html, body < height: 100%; >html < min-width: 320px; >body < overflow-x: hidden; background: #ccc; >.content
Document Отслеживать
задан 1 ноя 2017 в 10:26
1,211 2 2 золотых знака 17 17 серебряных знаков 36 36 бронзовых знаков
у вас ошибка — «min-widht»
1 ноя 2017 в 10:321 ответ 1
Сортировка: Сброс на вариант по умолчанию
html, body < height: 100%; >html < min-width: 320px; >body < overflow-x: hidden; background: #ccc; >.content < height: 20px; width: 5000px; background: #FFC; >/*выбери любую ширину меняя max-width */ @media only screen and (max-width: 500px) < body < overflow-x: scroll; background: red; >>erwewОтслеживать
ответ дан 1 ноя 2017 в 11:11
14.5k 6 6 золотых знаков 35 35 серебряных знаков 71 71 бронзовый знакЭто не то. Все элементы content, что были до этого скрыты (не спроста) станут открыты. Нужно чтобы они и остались скрыты. Ширина документа была не меньше 320px а если окно сужается и становится меньше 320px, то появляется горизонтальный скролл и можно прокрутить документ в пределах этих 320px
1 ноя 2017 в 14:10
@Igor тогда делайте min-width не на html, а на общую обертку контента, у которой overflow-x: hidden включен всегда. Сделать для вас отдельный пример или сами догадаетесь?