|
1 | | -The core of the solution is a function that adds more dates to the page (or loads more stuff in real-life) while we're at the page end. |
| 1 | +Основою рішення є функція, яка додає більше дат на сторінку (або завантажує більше речей у реальному житті), поки ми знаходимося в кінці сторінки. |
2 | 2 |
|
3 | | -We can call it immediately and add as a `window.onscroll` handler. |
| 3 | +Ми можемо негайно викликати її та додати `window.onscroll` як обробник. |
4 | 4 |
|
5 | | -The most important question is: "How do we detect that the page is scrolled to bottom?" |
| 5 | +Найважливіше запитання: "Як ми виявимо, що сторінка прокручується вниз?" |
6 | 6 |
|
7 | | -Let's use window-relative coordinates. |
| 7 | +Скористаємось координатами, відносними до вікна. |
8 | 8 |
|
9 | | -The document is represented (and contained) within `<html>` tag, that is `document.documentElement`. |
| 9 | +Документ представлений (і міститься) у тегу `<html>`, тобто `document.documentElement`. |
10 | 10 |
|
11 | | -We can get window-relative coordinates of the whole document as `document.documentElement.getBoundingClientRect()`, the `bottom` property will be window-relative coordinate of the document bottom. |
| 11 | +Ми можемо отримати відносні до вікна координати всього документа як `document.documentElement.getBoundingClientRect()`, властивість `bottom` буде відносною до вікна координатою низа документа. |
12 | 12 |
|
13 | | -For instance, if the height of the whole HTML document is `2000px`, then: |
| 13 | +Наприклад, якщо висота всього HTML-документа дорівнює `2000px`, тоді: |
14 | 14 |
|
15 | 15 | ```js |
16 | | -// when we're on the top of the page |
17 | | -// window-relative top = 0 |
| 16 | +// коли ми знаходимося вгорі сторінки |
| 17 | +// top відносний до вікна дорівнює 0 |
18 | 18 | document.documentElement.getBoundingClientRect().top = 0 |
19 | 19 |
|
20 | | -// window-relative bottom = 2000 |
21 | | -// the document is long, so that is probably far beyond the window bottom |
| 20 | +// bottom відносний до вікна дорівнює 2000 |
| 21 | +// документ великий, тому він, ймовірно, знаходиться далеко за нижньою частиною вікна |
22 | 22 | document.documentElement.getBoundingClientRect().bottom = 2000 |
23 | 23 | ``` |
24 | 24 |
|
25 | | -If we scroll `500px` below, then: |
| 25 | +Якщо ми прокрутимо `500px` нижче, то: |
26 | 26 |
|
27 | 27 | ```js |
28 | | -// document top is above the window 500px |
| 28 | +// Верхня частина документа знаходиться над вікном на 500px |
29 | 29 | document.documentElement.getBoundingClientRect().top = -500 |
30 | | -// document bottom is 500px closer |
| 30 | +// Нижня частина документа на 500px ближче |
31 | 31 | document.documentElement.getBoundingClientRect().bottom = 1500 |
32 | 32 | ``` |
33 | 33 |
|
34 | | -When we scroll till the end, assuming that the window height is `600px`: |
| 34 | +Коли ми прокручуємо до кінця, припускаючи, що висота вікна дорівнює `600px`: |
35 | 35 |
|
36 | 36 |
|
37 | 37 | ```js |
38 | | -// document top is above the window 1400px |
| 38 | +// Верхня частина документа знаходиться над вікном на 1400px |
39 | 39 | document.documentElement.getBoundingClientRect().top = -1400 |
40 | | -// document bottom is below the window 600px |
| 40 | +// Нижня частина документа знаходиться під вікном на 600px |
41 | 41 | document.documentElement.getBoundingClientRect().bottom = 600 |
42 | 42 | ``` |
43 | 43 |
|
44 | | -Please note that the `bottom` can't be `0`, because it never reaches the window top. The lowest limit of the `bottom` coordinate is the window height (we assumed it to be `600`), we can't scroll it any more up. |
| 44 | +Зауважте, що `bottom` не може бути `0`, оскільки він ніколи не досягає верхньої частини вікна. Найнижча межа `bottom` координати -- це висота вікна (ми припустили, що це `600`), ми більше не можемо прокручувати вгору. |
45 | 45 |
|
46 | | -We can obtain the window height as `document.documentElement.clientHeight`. |
| 46 | +Ми можемо отримати висоту вікна як `document.documentElement.clientHeight`. |
47 | 47 |
|
48 | | -For our task, we need to know when the document bottom is not no more than `100px` away from it (that is: `600-700px`, if the height is `600`). |
| 48 | +Для нашого завдання нам потрібно знати, коли нижня частина документа знаходиться на відстані не більше ніж `100px` від неї (тобто: `600-700px`, якщо висота `600`). |
49 | 49 |
|
50 | | -So here's the function: |
| 50 | +Отже, ось функція: |
51 | 51 |
|
52 | 52 | ```js |
53 | 53 | function populate() { |
54 | 54 | while(true) { |
55 | | - // document bottom |
| 55 | + // нижня частина документа |
56 | 56 | let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom; |
57 | 57 |
|
58 | | - // if the user hasn't scrolled far enough (>100px to the end) |
| 58 | + // якщо користувач не прокрутив достатньо далеко (>100px до кінця) |
59 | 59 | if (windowRelativeBottom > document.documentElement.clientHeight + 100) break; |
60 | 60 |
|
61 | | - // let's add more data |
| 61 | + // додамо більше даних |
62 | 62 | document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`); |
63 | 63 | } |
64 | 64 | } |
|
0 commit comments