Нескінченна сторінка
Створіть нескінченну сторінку. Коли відвідувач прокручує її до кінця, поточна дата-час автоматично додається до тексту (щоб відвідувач міг прокручувати більше).
ось таким чином:
Будь ласка, зверніть увагу на дві важливі особливості прокрутки:
- Прокручування є “еластичним”. У деяких браузерах/пристроях ми можемо прокрутити трохи далі початку або кінця документа (буде показано пусте місце, а потім документ автоматично “повернеться” до нормального стану).
- Прокрутка неточна. Коли ми прокручуємо до кінця сторінки, насправді ми можемо бути на відстані 0-50 пікселів від реального низу документа.
Отже, “прокрутка до кінця” має означати, що відвідувач знаходиться на відстані не більше 100 пікселів від кінця документа.
P.S. У реальному житті ми можемо захотіти показати “більше повідомлень” або “більше товарів”.
Основою рішення є функція, яка додає більше дат на сторінку (або завантажує більше речей у реальному житті), поки ми знаходимося в кінці сторінки.
Ми можемо негайно викликати її та додати window.onscroll як обробник.
Найважливіше запитання: “Як ми виявимо, що сторінка прокручується вниз?”
Скористаємось координатами, відносними до вікна.
Документ представлений (і міститься) у тегу <html>, тобто document.documentElement.
Ми можемо отримати відносні до вікна координати всього документа як document.documentElement.getBoundingClientRect(), властивість bottom буде відносною до вікна координатою низа документа.
Наприклад, якщо висота всього HTML-документа дорівнює 2000px, тоді:
// коли ми знаходимося вгорі сторінки
// top відносний до вікна дорівнює 0
document.documentElement.getBoundingClientRect().top = 0
// bottom відносний до вікна дорівнює 2000
// документ великий, тому він, ймовірно, знаходиться далеко за нижньою частиною вікна
document.documentElement.getBoundingClientRect().bottom = 2000Якщо ми прокрутимо 500px нижче, то:
// Верхня частина документа знаходиться над вікном на 500px
document.documentElement.getBoundingClientRect().top = -500
// Нижня частина документа на 500px ближче
document.documentElement.getBoundingClientRect().bottom = 1500Коли ми прокручуємо до кінця, припускаючи, що висота вікна дорівнює 600px:
// Верхня частина документа знаходиться над вікном на 1400px
document.documentElement.getBoundingClientRect().top = -1400
// Нижня частина документа знаходиться під вікном на 600px
document.documentElement.getBoundingClientRect().bottom = 600Зауважте, що bottom не може бути 0, оскільки він ніколи не досягає верхньої частини вікна. Найнижча межа bottom координати – це висота вікна (ми припустили, що це 600), ми більше не можемо прокручувати вгору.
Ми можемо отримати висоту вікна як document.documentElement.clientHeight.
Для нашого завдання нам потрібно знати, коли нижня частина документа знаходиться на відстані не більше ніж 100px від неї (тобто: 600-700px, якщо висота 600).
Отже, ось функція:
function populate() {
while(true) {
// нижня частина документа
let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
// якщо користувач не прокрутив достатньо далеко (>100px до кінця)
if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;
// додамо більше даних
document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
}
}