Scrolling by OlhaBrozhenets · Pull Request #295 · javascript-tutorial/uk.javascript.info
@@ -1,64 +1,64 @@
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.
Основою рішення є функція, яка додає більше дат на сторінку (або завантажує більше речей у реальному житті), поки ми знаходимося в кінці сторінки.
We can call it immediately and add as a `window.onscroll` handler. Ми можемо негайно викликати її та додати `window.onscroll` як обробник.
The most important question is: "How do we detect that the page is scrolled to bottom?" Найважливіше запитання: "Як ми виявимо, що сторінка прокручується вниз?"
Let's use window-relative coordinates. Скористаємось координатами, відносними до вікна.
The document is represented (and contained) within `<html>` tag, that is `document.documentElement`. Документ представлений (і міститься) у тегу `<html>`, тобто `document.documentElement`.
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. Ми можемо отримати відносні до вікна координати всього документа як `document.documentElement.getBoundingClientRect()`, властивість `bottom` буде відносною до вікна координатою низа документа.
For instance, if the height of the whole HTML document is `2000px`, then: Наприклад, якщо висота всього HTML-документа дорівнює `2000px`, тоді:
```js // when we're on the top of the page // window-relative top = 0 // коли ми знаходимося вгорі сторінки // top відносний до вікна дорівнює 0 document.documentElement.getBoundingClientRect().top = 0
// window-relative bottom = 2000 // the document is long, so that is probably far beyond the window bottom // bottom відносний до вікна дорівнює 2000 // документ великий, тому він, ймовірно, знаходиться далеко за нижньою частиною вікна document.documentElement.getBoundingClientRect().bottom = 2000 ```
If we scroll `500px` below, then: Якщо ми прокрутимо `500px` нижче, то:
```js // document top is above the window 500px // Верхня частина документа знаходиться над вікном на 500px document.documentElement.getBoundingClientRect().top = -500 // document bottom is 500px closer // Нижня частина документа на 500px ближче document.documentElement.getBoundingClientRect().bottom = 1500 ```
When we scroll till the end, assuming that the window height is `600px`: Коли ми прокручуємо до кінця, припускаючи, що висота вікна дорівнює `600px`:
```js // document top is above the window 1400px // Верхня частина документа знаходиться над вікном на 1400px document.documentElement.getBoundingClientRect().top = -1400 // document bottom is below the window 600px // Нижня частина документа знаходиться під вікном на 600px document.documentElement.getBoundingClientRect().bottom = 600 ```
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. Зауважте, що `bottom` не може бути `0`, оскільки він ніколи не досягає верхньої частини вікна. Найнижча межа `bottom` координати -- це висота вікна (ми припустили, що це `600`), ми більше не можемо прокручувати вгору.
We can obtain the window height as `document.documentElement.clientHeight`. Ми можемо отримати висоту вікна як `document.documentElement.clientHeight`.
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`). Для нашого завдання нам потрібно знати, коли нижня частина документа знаходиться на відстані не більше ніж `100px` від неї (тобто: `600-700px`, якщо висота `600`).
So here's the function: Отже, ось функція:
```js function populate() { while(true) { // document bottom // нижня частина документа let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
// if the user hasn't scrolled far enough (>100px to the end) // якщо користувач не прокрутив достатньо далеко (>100px до кінця) if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;
// let's add more data // додамо більше даних document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`); } } Expand Down
We can call it immediately and add as a `window.onscroll` handler. Ми можемо негайно викликати її та додати `window.onscroll` як обробник.
The most important question is: "How do we detect that the page is scrolled to bottom?" Найважливіше запитання: "Як ми виявимо, що сторінка прокручується вниз?"
Let's use window-relative coordinates. Скористаємось координатами, відносними до вікна.
The document is represented (and contained) within `<html>` tag, that is `document.documentElement`. Документ представлений (і міститься) у тегу `<html>`, тобто `document.documentElement`.
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. Ми можемо отримати відносні до вікна координати всього документа як `document.documentElement.getBoundingClientRect()`, властивість `bottom` буде відносною до вікна координатою низа документа.
For instance, if the height of the whole HTML document is `2000px`, then: Наприклад, якщо висота всього HTML-документа дорівнює `2000px`, тоді:
```js // when we're on the top of the page // window-relative top = 0 // коли ми знаходимося вгорі сторінки // top відносний до вікна дорівнює 0 document.documentElement.getBoundingClientRect().top = 0
// window-relative bottom = 2000 // the document is long, so that is probably far beyond the window bottom // bottom відносний до вікна дорівнює 2000 // документ великий, тому він, ймовірно, знаходиться далеко за нижньою частиною вікна document.documentElement.getBoundingClientRect().bottom = 2000 ```
If we scroll `500px` below, then: Якщо ми прокрутимо `500px` нижче, то:
```js // document top is above the window 500px // Верхня частина документа знаходиться над вікном на 500px document.documentElement.getBoundingClientRect().top = -500 // document bottom is 500px closer // Нижня частина документа на 500px ближче document.documentElement.getBoundingClientRect().bottom = 1500 ```
When we scroll till the end, assuming that the window height is `600px`: Коли ми прокручуємо до кінця, припускаючи, що висота вікна дорівнює `600px`:
```js // document top is above the window 1400px // Верхня частина документа знаходиться над вікном на 1400px document.documentElement.getBoundingClientRect().top = -1400 // document bottom is below the window 600px // Нижня частина документа знаходиться під вікном на 600px document.documentElement.getBoundingClientRect().bottom = 600 ```
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. Зауважте, що `bottom` не може бути `0`, оскільки він ніколи не досягає верхньої частини вікна. Найнижча межа `bottom` координати -- це висота вікна (ми припустили, що це `600`), ми більше не можемо прокручувати вгору.
We can obtain the window height as `document.documentElement.clientHeight`. Ми можемо отримати висоту вікна як `document.documentElement.clientHeight`.
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`). Для нашого завдання нам потрібно знати, коли нижня частина документа знаходиться на відстані не більше ніж `100px` від неї (тобто: `600-700px`, якщо висота `600`).
So here's the function: Отже, ось функція:
```js function populate() { while(true) { // document bottom // нижня частина документа let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
// if the user hasn't scrolled far enough (>100px to the end) // якщо користувач не прокрутив достатньо далеко (>100px до кінця) if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;
// let's add more data // додамо більше даних document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`); } } Expand Down