Sonsuz sayfa
Sonsuz bir sayfa oluşturun. Ziyaretçi sayfayı sonuna kadar kaydırdığında metnin sonuna otomatik olarak güncel tarih-saat eklenir (böylece ziyaretçi daha fazla kaydırabilir).
Örnekteki gibi:
Lütfen kaydırmanın iki önemli özelliğine dikkat edin:
- Kaydırma “esnektir”. Bazı tarayıcılarda / cihazlarda sayfa başlangıcından veya sonundan biraz öteye kaydırabiliriz (altında boşluk görüntülenir ardından otomatik olarak normale “geri döner”).
- Kaydırma “belirsizdir”. Sayfa sonuna kaydırdığımızda gerçek sayfanın altından 0-50 piksel kadar uzakta olabiliriz.
Dolayısıyla “sonuna kadar kaydırma” ifadesi, ziyaretçinin sayfa sonuna en fazla 100 piksel uzakta olduğu anlamına gelmelidir.
Not: Gerçek hayatta “daha fazla mesaj” veya “daha fazla ürün” göstermek isteyebiliriz.
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.
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.
We can get window-relative coordinates of the whole document as document.documentElement.getBoundingClientRect(). And the bottom property will be window-relative coordinate of the document end.
For instance, if the height of the whole HTML document is 2000px, then:
// When we're on the top of the page
// window-relative top = 0
document.documentElement.getBoundingClientRect().top = 0
// window-relative bottom = 2000
// the document is long, so that is probably far beyond the window bottom
document.documentElement.getBoundingClientRect().bottom = 2000If we scroll 500px below, then:
// document top is above the window 500px
document.documentElement.getBoundingClientRect().top = -500
// document bottom is 500px closer
document.documentElement.getBoundingClientRect().bottom = 1500When we scroll till the end, assuming that the window height is 600px:
// document top is above the window 1400px
document.documentElement.getBoundingClientRect().top = -1400
// document bottom is below the window 600px
document.documentElement.getBoundingClientRect().bottom = 600Please 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 can’t scroll it any more up.
And the window height is document.documentElement.clientHeight.
We want the document bottom be no more than 100px away from it.
So here’s the function:
function populate() {
while(true) {
// document bottom
let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
// if it's greater than window height + 100px, then we're not at the page back
// (see examples above, big bottom means we need to scroll more)
if (windowRelativeBottom > document.documentElement.clientHeight + 100) break;
// otherwise let's add more data
document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
}
}