Как определить узнать высоту страницы js. Как определить "разрешение экрана" и "размер окна браузера" на JavaScript и jQuery. Изменение прокрутки страницы: scrollTo, scrollBy, scrollIntoView

При разработке интерфейсов для сайтов частенько приходиться пользоваться JavaScript. Конечно же это плохо, но в некоторых ситуация просто невозможно реализовать полностью все на CSS .

Самая часта потребность именно у меня возникает в определении ширины или высоты окна браузера для дальнейших манипуляций. Под катом вся информация по этой теме.

Где это может пригодиться?

Я не буду говорить за всех, но мне это пригождается в интеграции с Textpattern`ом всевозможных галерей, слайдеров и т.д., где все написано на чистом JS. Вещи, которые жестко завязаны на JS встречаются редко, но все же встречаются, поэтому и появилась эта заметка.

Определять можно 2 способами: JS или jQuery.

Определение ширины или высоты с помощью чистого JS

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

Конечно же есть вероятность того, что пользователь собственноручно отключить обработку JS в браузере, но, кажется мне, таких «странных людей» не так много, так как практически каждый сайт использует какие-нибудь решения, работающие на JS.

В JS, чтобы определить размеры экрана , нужно использовать функции:

Screen.width //Ширина экрана screen.height //Высота экрана

Вот бессмысленный пример использования:

alert(screen.width+"x"+screen.height);

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

Document.body.clientWidth //Ширина браузера document.body.clientHeight //Высота браузера

Соответственно вот бессмысленный пример использования:

alert(document.body.clientWidth+"x"+document.body.clientHeight);

Определение размеров браузера с помощью jQuery

Лично я пользуюсь методом, который описан ниже. Этот метод работает только если у Вас на сайте ранее подключена библиотека jQuery. На всех сайтах, которые мне приходится делать эта библиотека является стандартом де`факто.

Чтобы задействовать для нашей задачи jQuery, необходимо использовать код:

$(window).width(); //Ширина браузера $(window).height(); //Высота браузера

И в конце хотелось бы сказать, что если есть возможность обойтись без JS и jQuery вообще или частично, то именно так и нужно поступать.

Рассказать в соц. сетях

Для чего это надо? К примеру у нас есть красивый макет сайта, который всю свою красоту проявляет только при разрешении, скажем, 1600 на 1200. К примеру, у него очень большая красивая шапка. Что будет если человек зайдёт на сайт при разрешении 1024 на 768? Да, только шапка и будет видна. Не хорошо? Пожалуй. Тогда почему бы не сделать такую вещь, что при высоте браузера/экрана шапка бы просто обрезалась, а шло меню и остальной сайт? Во, то что надо.

Собственно я описал один из примеров, с которым столкнулся на практике (см.картинку). Решал проблему просто - через javascript. А может и через jQuery, уже не помню. Опишу оба метода здесь.

Прежде всего следует отличать определение "разрешения экрана " и "размера окна браузера " (поскольку в некоторых статьях были казусы - хаили одни методы, предлагали другие, хотя в одном случае мерили разрешение браузера, в другом - разрешение монитора).

Нужно с самого начала определить что для Вас важнее. В случае того примера с шапкой, я ориентировался на разрешение экрана (монитора): всё таки сайт красив, если окно браузера уменьшено вручную, то пускай при просмотре этого сайта развернут свой браузера на весь экран (нечего им, панимаишь ли - прим.ред. ). Но, к примеру, для подстройки развернутого изображения галереи jQuery Lightbox я использовал ширину и высоту браузера.

А после того, как выбрали, пишем код, можно в шапке сайта. Сначала пример, ориентированный на разрешение экрана .

3-6 строки - чисто javascript, 7-11 строки - пример на jQuery. Для определения ширины и высоты используются javascript методы screen.width и screen.height. Что делают строки, ясно: первый скрипт прописывает путь к дополнительному файлу CSS, а другой - для блока с идентификатором total проставляет свойство css "background-position".

Смотрим второй пример, но который будет ориентироваться на разрешение браузера. Всё тоже самое, изменились методы.

Итак, из двух примеров краткий обзор - что для чего использовать:

screen.width . Определяет ширину экрана (монитора).

screen.height . Определяет высоту экрана (монитора).

document.body.clientWidth . Определяет ширину браузера.

document.body.clientHeight . Определяет высоту браузера.

$(window).width() . Определяет ширину браузера, но только при наличии jQuery.

$(window).height() . Определяет высоту браузера, но только при наличии jQuery.

Понятно, что если вы используете jQuery, то предпочтительнее 5 вариант, нежели 3, и 6 нежели 4 - они покороче просто. Ну а так - на вкус и на цвет.

Что касается специфических записей высоты и ширины экраны дл jQuery - то, по правде говоря, я их не знаю. По идее должна быть конструкция типа 5-6 строк, но как-то на практике не сталкивался, сдаётся мне, их нет. Да и не надо, screen.width достаточно короткая конструкция, её хватает.

Да, ещё есть $(document).width() - определяет ширину HTML документа. Использования на практике - как-то сомнительно. Кто знает - буду рад, если поделитесь.

На сегодня всё! Держимся до выходных и массово едем на шашлыки! (если только вы не больны чем-то, как некоторые - прим.ред.). Удачи!

Здравствуйте! В продолжении темы в этом уроке мы с вами рассмотрим такой вопрос как прокрутка веб-страницы и манипулирование размерами браузера. Как можно найти ширину браузера? Как прокрутить веб-страницу средствами JavaScript ? Ответы на эти вопросы я думаю вы найдете в этом уроке.

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


Не window.innerWidth/Height

Надо отметить, что все браузеры, кроме IE8-, могут также поддерживать свойства window.innerWidth/innerHeight. Они сохраняют текущий размер окна.

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

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

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

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

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

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

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

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

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

Эта проблема может возникать именно для documentElement.

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

Var scrollVisota = Math.max(document.body.scrollVisota, document.documentElement.scrollHeight, document.body.offsetVisota, document.documentElement.offsetHeight, document.body.clientVisota, document.documentElement.clientHeight); alert("Высота с учетом прокрутки: " + scrollVisota);

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

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

То, что же со страницей?

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

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

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

Эти все свойства:

• Не поддерживаются IE8-
• Их можно только читать, а менять нельзя.

Если IE8- не волнует, то просто используем эти свойства.

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

Var scrollTop = window.pageYOffset || document.documentElement.scrollTop; alert("Текущая прокрутка: " + scrollTop);

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

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

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

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

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

• Метод scrollBy(x,y) будет прокручивает страницу относительно ее текущих координат.
• Метод scrollTo(pageX,pageY) прокручивает страницу к указанным координатам относительно всего документа. Он будет эквивалентен установке свойств scrollLeft/scrollTop. Чтобы прокрутить в начало документа, вам достаточно указать координаты (0,0).

scrollIntoView

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

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

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

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

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

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

Итоги

• Для получения размеров видимой части окна используется свойство: document.documentElement.clientWidth/Height
• Для получения размеров страницы с учётом прокрутки следует использовать: var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);

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

Свойства innerWidth и innerHeight

Они предназначены для получения размеров видимой рабочей области окна браузера. Т.е. свойства innerWidth и innerHeight предназначены для получения значений ширины и высоты области, в которой отображается HTML-документ. Эти свойства доступны только для чтения и возвращают значения в пикселях.

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

Ширина видимой области просмотра (widthContenArea):

Ширина видимой области просмотра (heightContenArea):

// ширина видимой области просмотра (для всех браузеров, кроме Internet Explorer 8) var widthContenArea = window.innerWidth; // высота видимой области просмотра (для всех браузеров, кроме Internet Explorer 8) var heightContenArea = window.innerHeight; // ширина видимой области просмотра (для Internet Explorer 8) widthContenArea = document.documentElement.clientWidth || document.body.clientWidth; // высота видимой области просмотра (для Internet Explorer 8) heightContenArea = document.documentElement.clientHeight || document.body.clientHeight; // ширина видимой области просмотра (для всех браузеров) widthContenArea1 = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // высота видимой области просмотра (для всех браузеров) heightContenArea1 = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; document.getElementById("widthContenArea").innerHTML = widthContenArea; document.getElementById("heightContenArea").innerHTML = heightContenArea;

Свойства outerWidth и outerHeight

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

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

Ширина окна браузера (widthWindow):

Высота окна браузера (heighWindow):

// ширина окна браузера var widthWindow = window.outerWidth; // высота окна браузера var heightWindow = window.outerHeight; document.getElementById("widthWindow").innerHTML = widthWindow; document.getElementById("heightWindow").innerHTML = heightWindow;

Свойства screenLeft (screenX) и screenTop (screenY)

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

При этом свойства screenLeft и screenTop работают в Internet Explorer, а свойства screenX и screenY в Mozilia Firefox. В браузерах Chrome, Safari и других подобных браузерах можно использовать как свойства screenLeft и screenTop , так и свойства screenX и screenY .

При использовании данных свойств необходимо учитывать тот факт, что некоторые браузеры могут возвращать координату левого верхнего угла документа, а некоторые браузеры координату левого верхнего угла окна. Свойства screenleft (screenX) и screenTop (screenY) доступны только для чтения и возвращают соответственно значения расстояний относительно левого угла экрана по горизонтали и вертикали в пикселях.

Например, выведем виде сообщения координаты х и у левого угла текущего окна браузера (документа) относительно левого верхнего угла экрана:

function windowXY() { // Используя свойства screenleft и screenTop, получаем координаты расположения окна (документа) var winX = window.screenLeft; var winY = window.screenTop; // Используя свойства screenX и screenY, получаем координаты расположения окна (документа) winX = window.screenX; winY = window.screenY; // Получаем координаты расположения окна (документа) во всех браузерах winX = window.screenX ? window.screenX: window.screenLeft; winY = window.screenY ? window.screenY: window.screenTop; window.alert ("Координаты окна относительно экрана пользователя: X = " + winX + ", Y = " + winY + "."); } Узнать координаты

Свойства pageXOffset (scrollX) и pageYOffset (scrollX)

Они предназначены для получения количества пикселей, на которые документ был прокручен в горизонтальном (pageXOffset) или вертикальном (pageYOffset) направлении относительного левого верхнего угла окна. Свойства scrollX и scrollY эквиваленты соответственно свойствам pageXOffset и pageYOffset . Эти свойства доступны только для чтения.

Например, вывести в сообщении количество пикселей, на которые документ был прокручен в горизонтальном (pageXOffset) и вертикальном (pageYOffset) направлении.

function scrollContent() { //Прокрутим текущий документ на 200рх вправо и вниз window.scrollBy(200,200); //Получим значения, используя свойства pageXOffset и pageYOffset var winOffsetX = window.pageXOffset; var winOffsetY = window.pageYOffset; //Получим значения, на которые документ был прокручен в горизонтальном или вертикальном направлении для Internet Explorer: winOffsetX = document.documentElement.scrollLeft; winOffsetY = document.documentElement.scrollTop; //Для всех браузеров: winOffsetX = window.pageXOffset || document.documentElement.scrollLeft; winOffsetY = window.pageYOffset || document.documentElement.scrollTop; alert ("Количество пикселей, на которые документ был прокручен в горизонтальном и вертикальном направлении: X = " + winOffsetX + ", Y = " + winOffsetY + "."); } Узнать положения полос прокрутки