Як визначити, дізнатися висоту сторінки js. Як визначити роздільну здатність екрана і розмір вікна браузера на JavaScript і jQuery. Зміна прокручування сторінки: scrollTo, scrollBy, scrollIntoView

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

Найчастіша потреба саме у мене виникає у визначенні ширини чи висоти вікна браузера для подальших маніпуляцій. Під катом вся інформація на цю тему.

Де це може стати в нагоді?

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

Визначати можна двома способами: 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. .clientHeight);

На цьому уроці ми розглянемо властивості об'єкта window , за допомогою яких Ви можете отримати розміри робочої області вікна браузера (innerWidth та innerHeight), розміри самого вікна (outerWidth та outerHeight), його розташування щодо лівого верхнього кута екрана користувача (screenLeft та screenLeft) прокручування (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, = window.screenX;winY = window.screenY;// Отримуємо координати розташування вікна (документа) у всіх браузерах winX = window.screenX - window.screenX: window.screenLeft; ; 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 = winOffsetX = window.pageXOff; значення , на які документ був прокручений у горизонтальному або вертикальному напрямку для Internet Explorer: winOffsetX = document.documentElement.scrollLeft;, winOffsetY = document.documentElement.scrollTop; winOffsetY = window.pageYOffset || Дізнатися про смуги прокручування