Як визначити ширину та виÑоту вікна браузера? Як отримати повну ширину та виÑоту документа, включаючи прокручену чаÑтину? Як можна прокрутити Ñторінку за допомогою JavaScript?
Ð”Ð»Ñ Ñ†ÑŒÐ¾Ð³Ð¾ ми можемо викориÑтовувати кореневий елемент документа document.documentElement, Ñкий відповідає тегу <html>. Ðле Ñ” додаткові методи та оÑобливоÑÑ‚Ñ–, Ñкі Ñлід враховувати.
Ширина/виÑота вікна
Щоб отримати ширину та виÑоту вікна, ми можемо викориÑтовувати clientWidth/clientHeight з document.documentElement:
Ðаприклад, Ñ†Ñ ÐºÐ½Ð¾Ð¿ÐºÐ° показує виÑоту вашого вікна:
window.innerWidth/innerHeightБраузери також підтримують влаÑтивоÑÑ‚Ñ– window.innerWidth/innerHeight. Ðачебто Ñхоже на те, що нам потрібно. Чому б Ñ—Ñ… не викориÑтати?
Якщо Ñ” Ñмуга прокрутки, Ñ– вона займає деÑкий проÑÑ‚Ñ–Ñ€, то влаÑтивоÑÑ‚Ñ– clientWidth/clientHeight нададуть ширину/виÑоту без прокрутки (віднÑвши Ñ—Ñ—). Інакше кажучи, вони повертають ширину/виÑоту видимої чаÑтини документа, доÑтупної Ð´Ð»Ñ Ð²Ð¼Ñ–Ñту.
Ð window.innerWidth/innerHeight включають Ñмугу прокрутки.
Якщо Ñ” Ñмуга прокрутки та вона займає деÑкий проÑÑ‚Ñ–Ñ€, то ці два Ñ€Ñдки покажуть різні значеннÑ:
alert( window.innerWidth ); // повна ширина вікна
alert( document.documentElement.clientWidth ); // ширина вікна Ð¼Ñ–Ð½ÑƒÑ Ñмуга прокруткиУ більшоÑÑ‚Ñ– випадків нам потрібна доÑтупна ширина вікна без Ñмуги прокрутки, щоб намалювати або розташувати щоÑÑŒ. Тому ми маємо викориÑтовувати documentElement.clientHeight/clientWidth.
DOCTYPE важливийЗверніть увагу: геометричні влаÑтивоÑÑ‚Ñ– верхнього Ñ€Ñ–Ð²Ð½Ñ Ð¼Ð¾Ð¶ÑƒÑ‚ÑŒ працювати дещо інакше, Ñкщо в HTML немає <!DOCTYPE HTML>. Можливі дивні речі.
У ÑучаÑному HTML ми завжди повинні вказувати DOCTYPE.
Ширина/виÑота документа
Теоретично, оÑкільки кореневим елементом документа Ñ” document.documentElement, Ñ– він охоплює веÑÑŒ вміÑÑ‚, ми можемо вимірÑти повний розмір документа Ñк document.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);Чому так? Краще не запитуйте. Ці невідповідноÑÑ‚Ñ– походÑÑ‚ÑŒ із давніх чаÑів, а не з глибокої логіки.
ÐžÑ‚Ñ€Ð¸Ð¼Ð°Ð½Ð½Ñ Ð¿Ð¾Ñ‚Ð¾Ñ‡Ð½Ð¾Ñ— позиції прокрутки
Елементи DOM зберігають Ñвій поточний Ñтан прокрутки у влаÑтивоÑÑ‚ÑÑ… scrollLeft/scrollTop.
Стан прокрутки документа міÑтитьÑÑ Ð² document.documentElement.scrollLeft/scrollTop, та працює в більшоÑÑ‚Ñ– браузерів, за винÑтком Ñтаріших браузерів Ñтворених на WebKit, таких Ñк Safari (помилка 5991), де ми повинні викориÑтовувати document.body заміÑÑ‚ÑŒ document.documentElement.
Ðа щаÑÑ‚Ñ, нам не потрібно пам’Ñтати про ці оÑобливоÑÑ‚Ñ–, оÑкільки прокрутка доÑтупна у Ñпеціальних влаÑтивоÑÑ‚ÑÑ… window.pageXOffset/pageYOffset:
alert('Поточна прокрутка зверху: ' + window.pageYOffset);
alert('Поточна прокрутка зліва: ' + window.pageXOffset);Ці влаÑтивоÑÑ‚Ñ– доÑтупні лише Ð´Ð»Ñ Ñ‡Ð¸Ñ‚Ð°Ð½Ð½Ñ.
window scrollX та scrollYЗ Ñ–Ñторичних причин обидві влаÑтивоÑÑ‚Ñ– Ñ–Ñнують, але вони однакові:
window.pageXOffsetÑ” пÑевдонімомwindow.scrollX.window.pageYOffsetÑ” пÑевдонімомwindow.scrollY.
Прокрутка: scrollTo, scrollBy, scrollIntoView
Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, щоб прокручувати Ñторінку за допомогою JavaScript, Ñ—Ñ— DOM має бути повніÑÑ‚ÑŽ Ñтворено.
Ðаприклад, Ñкщо ми Ñпробуємо прокрутити Ñторінку в коді Ñкрипта розташованого в <head>, це не Ñпрацює.
Звичайні елементи можна прокручувати, змінюючи scrollTop/scrollLeft.
Ми можемо зробити те ж Ñаме Ð´Ð»Ñ Ñторінки, викориÑтовуючи document.documentElement.scrollTop/scrollLeft (крім 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 до Ñ– піÑÐ»Ñ Ð·Ð°Ð±Ð¾Ñ€Ð¾Ð½Ð¸ прокручуваннÑ. Якщо ширина збільшилаÑÑŒ (Ñмуга прокрутки зникла), додайте padding до document.body заміÑÑ‚ÑŒ Ñмуги прокрутки, щоб зберегти ширину вміÑту такою ж.
ПідÑумки
Розміри:
-
Ширина/виÑота видимої чаÑтини документа (ширина/виÑота облаÑÑ‚Ñ– вміÑту):
document.documentElement.clientWidth/clientHeight -
Ширина/виÑота вÑього документа з прокрученою чаÑтиною:
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видимим (вирівнÑти з верхньою/нижньою чаÑтиною вікна).
Коментарі
<code>, Ð´Ð»Ñ ÐºÑ–Ð»ÑŒÐºÐ¾Ñ… Ñ€Ñдків – обгорніть Ñ—Ñ… тегом<pre>, Ð´Ð»Ñ Ð¿Ð¾Ð½Ð°Ð´ 10 Ñ€Ñдків – викориÑтовуйте піÑочницю (plnkr, jsbin, codepen…)