mirror of
https://github.com/osmarks/website
synced 2024-12-25 09:30:31 +00:00
43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
|
// infiscroll.js
|
||
|
// A really simple infinite-scroll system.
|
||
|
// Places an invisible marker element near the bottom of the screen and adds new content until it's offscreen.
|
||
|
|
||
|
function insertAfter(newNode, referenceNode) {
|
||
|
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
|
||
|
}
|
||
|
|
||
|
function addMarker(reference, markerPos) {
|
||
|
var markerPos = markerPos || "5vh";
|
||
|
|
||
|
var el = document.createElement("div");
|
||
|
el.style.position = "relative";
|
||
|
el.style.top = "-" + markerPos;
|
||
|
el.style.width = "1px";
|
||
|
el.style.height = "1px";
|
||
|
el.classList.add("marker");
|
||
|
|
||
|
insertAfter(el, reference)
|
||
|
|
||
|
return el;
|
||
|
}
|
||
|
|
||
|
function infiscroll(addNewContent, markerPos, reference, maxRetries) {
|
||
|
var maxRetries = maxRetries || 10
|
||
|
var marker = addMarker(reference, markerPos);
|
||
|
|
||
|
var handler = function() {
|
||
|
let i = 0;
|
||
|
var x = marker.getBoundingClientRect().bottom
|
||
|
while (x / document.documentElement.scrollHeight < 0.2 || x < window.innerHeight) {
|
||
|
i++
|
||
|
if (i - 1 == maxRetries) {
|
||
|
break
|
||
|
}
|
||
|
addNewContent()
|
||
|
}
|
||
|
}
|
||
|
|
||
|
handler()
|
||
|
window.addEventListener("scroll", handler)
|
||
|
setInterval(handler, 500) // evil bodge
|
||
|
}
|