You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Браузери також підтримують властивості `window.innerWidth/innerHeight`. Здається, це те, що нам потрібно, то чому б їх не використати?
20
+
Браузери також підтримують властивості `window.innerWidth/innerHeight`. Начебто схоже на те, що нам потрібно. Чому б їх не використати?
21
21
22
22
Якщо є смуга прокрутки, і вона займає деякий простір, то властивості `clientWidth/clientHeight` нададуть ширину/висоту без прокрутки (віднявши її). Інакше кажучи, вони повертають ширину/висоту видимої частини документа, доступної для вмісту.
А `window.innerWidth/innerHeight`включають смугу прокрутки.
25
25
26
-
Якщо є смуга прокрутки, і вона займає деякий простір, то ці два рядки покажуть різні значення:
26
+
Якщо є смуга прокрутки та вона займає деякий простір, то ці два рядки покажуть різні значення:
27
27
```js run
28
28
alert( window.innerWidth ); // повна ширина вікна
29
29
alert( document.documentElement.clientWidth ); // ширина вікна мінус смуга прокрутки
30
30
```
31
31
32
-
У більшості випадків нам потрібна *доступна* ширина вікна, щоб намалювати або розташувати щось у межах смуг прокрутки (якщо такі є), тому ми повинні використовувати `documentElement.clientHeight/clientWidth`.
33
-
````
32
+
У більшості випадків нам потрібна *доступна* ширина вікна без смуги прокрутки, щоб намалювати або розташувати щось. Тому ми маємо використовувати `documentElement.clientHeight/clientWidth`.
34
33
35
34
```warn header="`DOCTYPE` важливий"
36
35
Зверніть увагу: геометричні властивості верхнього рівня можуть працювати дещо інакше, якщо в HTML немає `<!DOCTYPE HTML>`. Можливі дивні речі.
37
36
38
-
У сучасному HTML ми завжди повинні прописувати `DOCTYPE`.
39
-
```
37
+
У сучасному HTML ми завжди повинні вказувати `DOCTYPE`.
40
38
41
39
## Ширина/висота документа
42
40
43
41
Теоретично, оскільки кореневим елементом документа є `document.documentElement`, і він охоплює весь вміст, ми можемо виміряти повний розмір документа як `document.documentElement.scrollWidth/scrollHeight`.
44
42
45
-
Але для цього елемента для всієї сторінки ці властивості не працюють належним чином. У Chrome/Safari/Opera, якщо немає прокрутки, то `documentElement.scrollHeight` може бути навіть меншим, ніж `documentElement.clientHeight`! Дивно, правда?
43
+
Але для цього елемента для всієї сторінки ці властивості не працюють належним чином. У Chrome/Safari/Opera, якщо немає смуги прокрутки, то `documentElement.scrollHeight` може бути навіть меншим, ніж `documentElement.clientHeight`! З точки зору елемента це неможлива ситуація.
46
44
47
-
Щоб надійно отримати повну висоту документа, ми повинні взяти максимум з цих властивостей:
45
+
Щоб надійно отримати повну висоту документа, ми повинні взяти максимальне значення з цих властивостей:
48
46
49
47
```js run
50
48
let scrollHeight =Math.max(
@@ -56,13 +54,13 @@ let scrollHeight = Math.max(
56
54
alert('Повна висота документа з прокрученою частиною: '+ scrollHeight);
57
55
```
58
56
59
-
Чому так? Краще не питати. Ці невідповідності походять із давніх часів, це не "логічно".
57
+
Чому так? Краще не запитуйте. Ці невідповідності походять із давніх часів, а не з глибокої логіки.
60
58
61
59
## Отримання поточної позиції прокрутки [#page-scroll]
62
60
63
-
Елементи DOM містять свій поточний стан прокрутки у властивостях `scrollLeft/scrollTop`.
61
+
Елементи DOM зберігають свій поточний стан прокрутки у властивостях `scrollLeft/scrollTop`.
64
62
65
-
Стан прокрутки документа міститься в `document.documentElement.scrollLeft/scrollTop`, та працює в більшості браузерів, за винятком старіших веб-переглядачів створених на WebKit, таких як Safari (помилка [5991](https://bugs.webkit.org/show_bug.cgi?id=5991)), де ми повинні використовувати `document.body` замість `document.documentElement`.
63
+
Стан прокрутки документа міститься в `document.documentElement.scrollLeft/scrollTop`, та працює в більшості браузерів, за винятком старіших браузерів створених на WebKit, таких як Safari (помилка [5991](https://bugs.webkit.org/show_bug.cgi?id=5991)), де ми повинні використовувати `document.body` замість `document.documentElement`.
66
64
67
65
На щастя, нам не потрібно пам’ятати про ці особливості, оскільки прокрутка доступна у спеціальних властивостях `window.pageXOffset/pageYOffset`:
Щоб прокручувати сторінку за допомогою JavaScript, її DOM має бути повністю створено.
82
+
Для того, щоб прокручувати сторінку за допомогою JavaScript, її DOM має бути повністю створено.
86
83
87
-
Наприклад, якщо ми спробуємо прокрутити сторінку за допомогою сценарію в `<head>`, це не спрацює.
88
-
```
84
+
Наприклад, якщо ми спробуємо прокрутити сторінку в коді скрипта розташованого в `<head>`, це не спрацює.
89
85
90
86
Звичайні елементи можна прокручувати, змінюючи `scrollTop/scrollLeft`.
91
87
92
88
Ми можемо зробити те ж саме для сторінки, використовуючи `document.documentElement.scrollTop/scrollLeft` (крім Safari, де замість цього слід використовувати `document.body.scrollTop/Left`).
93
89
94
-
Крім того, є більш просте та універсальне рішення: спеціальні методи [window.scrollBy(x,y)](mdn:api/Window/scrollBy) і [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
90
+
Також існує простіший та універсальний підхід: спеціальні методи [window.scrollBy(x,y)](mdn:api/Window/scrollBy) і [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
95
91
96
92
- Метод `scrollBy(x,y)` прокручує сторінку *відносно її поточної позиції*. Наприклад, `scrollBy(0,10)` прокручує сторінку на `10px` вниз.
- Метод `scrollTo(pageX,pageY)` прокручує сторінку *до абсолютних координат*, так що верхній лівий кут видимої частини має координати `(pageX, pageY)` відносно верхнього лівого кута документа. Це те ж саме, що призначити `scrollLeft/scrollTop`.
99
+
- Метод `scrollTo(pageX,pageY)` прокручує сторінку *на абсолютні координати*, так що верхній лівий кут видимої частини мав координати `(pageX, pageY)` відносно верхнього лівого кута документа. Це те ж саме, що призначити `scrollLeft/scrollTop`.
104
100
105
101
Щоб прокрутити до самого початку, ми можемо використовувати `scrollTo(0,0)`.
Виклик `elem.scrollIntoView(top)` прокручує сторінку таким чином, щоб зробити `elem` видимим. Він має один аргумент:
118
114
119
-
- Якщо `top=true` (це значення за замовчуванням), то сторінка буде прокручена так, щоб `elem` з’явився у верхній частині вікна. Верхній край елемента буде вирівняний з верхньою частиною вікна.
115
+
- Якщо `top=true` (типове значення), то сторінка буде прокручена так, щоб `elem` з’явився у верхній частині вікна. Верхній край елемента буде вирівняний з верхньою частиною вікна.
120
116
- Якщо `top=false`, то сторінка прокручується так, щоб `elem` з’явився внизу. Нижній край елемента буде вирівняний з нижньою частиною вікна.
Іноді нам потрібно зробити документ «непрокручуваним». Наприклад, коли нам потрібно закрити сторінку великим повідомленням, яке вимагає негайної уваги, і ми хочемо, щоб відвідувач взаємодіяв з цим повідомленням, а не з документом.
130
+
Іноді нам потрібно зробити документ "не прокручуваним". Наприклад, щоб закрити сторінку великим повідомленням, яке вимагає негайної уваги, і ми хочемо, щоб відвідувач взаємодіяв з цим повідомленням, а не з документом.
135
131
136
-
Щоб зробити документ недоступним для прокручування, достатньо встановити `document.body.style.overflow = "hidden"`. Сторінка «завмере» у поточній позиції прокручування.
132
+
Щоб зробити документ недоступним для прокручування, достатньо встановити `document.body.style.overflow = "hidden"`. Сторінка "завмре" у поточній позиції прокручування.
0 commit comments