Page sans Fin
Créez une page sans fin. Lorsqu’un visiteur la défile vers la fin, elle y appose automatiquement au texte l’heure et la date en temps réelle (de sorte à ce que le visiteur puisse défiler d’avantage la page).
Comme ceci:
S’il vous plait veuillez noter deux importants aspects du défilement:
- Le défilement est “élastique”. Nous pouvons défiler un peu au-delà du début ou la fin du document avec certains navigateurs /appareils (l’espace vide en bas est montrée, et ensuite le document va automatiquement “retourner” à la normale).
- Le défilement est imprécis. Quand nous défilons vers la fin de la page, alors nous pouvons être en réalité entre 0-50px de la fin réelle document.
donc, “le défilement vers la fin” doit signifier que le visiteur n’est pas à plus de 100px de la fin du document.
P.S. En réalité nous pourrions vouloir montrer " plus de messages" ou " plus de bonnes choses".
L’essence de la solution est une fonction qui ajoute plus de dates à la page (ou charge plus de chose en réalité) alors que nous sommes en fin de page.
Nous pouvons l’appeler immédiatement et y ajouter un contrôleur d’évènement avec window.onscroll.
La question cruciale est: " Comment détectons nous que la page est défilée vers le bas?"
Utilisons les coordonnées relatives de window: window-relative.
Le document est représenté (et contenu) dans la balise <html>, qui est document.documentElement.
Nous pouvons obtenir les coordonnées relatives à la fenêtre du document en entier avec document.documentElement.getBoundingClientRect(), la propriété bottom sera la coordonnée relative à la fenêtre de la fin du document.
Par exemple, si la hauteur totale du document HTML est de 2000px, alors :
// Lorsqu'on est en haut de la page
// window-relative top = 0
document.documentElement.getBoundingClientRect().top = 0
// window-relative en bas de page = 2000
// le document est long, alors c'est probablement bien au-delà des limites inferieures de la fenêtre
document.documentElement.getBoundingClientRect().bottom = 2000Si nous défilonsla page de 500px vers le bas, alors:
// document top is above the window 500px
document.documentElement.getBoundingClientRect().top = -500
// le bas du document est 500px plus proche
document.documentElement.getBoundingClientRect().bottom = 1500Lorsque nous défilons jusque vers la fin, en assumant que la hauteur de la fenêtre est de 600px:
// La limite supérieure du document est au-dessus de la fenêtre à 1400px
document.documentElement.getBoundingClientRect().top = -1400
// Le bas du document est au bas de la fenêtre à 600px
document.documentElement.getBoundingClientRect().bottom = 600Veuillez noter que le bottom ne peut être 0, parce qu’elle n’atteint jamais le haut de la fenêtre. La limite la plus basse de coordonées bottom est la hauteur de la fenêtre (nous avons supposé que ce soit 600), nous ne pouvons plus la défiler vers le haut.
Nous pouvons obtenir la hauteur de la fenêtre comme document.documentElement.clientHeight.
Pour notre tâche, nous devons savoir quand la fin du document n’est pas plus éloigné de 100px (c’est-à-dire 600-700px si la hauteur est 600).
Donc voici la fonction:
function populate() {
while(true) {
// la fin du document
let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
// si l'utilisateur n'a pas fait défiler suffisamment loin (> 100px jusqu'à la fin)
if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;
// ajoutons plus de données
document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
}
}