REAL seamless now!
This commit is contained in:
@@ -440,38 +440,19 @@ window.requestAnimFrame = (function () {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Scroll detection
|
// Scroll detection - preload before reaching bottom
|
||||||
let tts = 0;
|
const PRELOAD_OFFSET = 500; // pixels before bottom to trigger load
|
||||||
const scroll_treshold = 1;
|
|
||||||
|
|
||||||
document.addEventListener("wheel", e => {
|
window.addEventListener("scroll", () => {
|
||||||
if (!document.querySelector('#main')) return;
|
if (!document.querySelector('#main')) return;
|
||||||
|
|
||||||
if (Math.ceil(window.innerHeight + window.scrollY) >= document.querySelector('#main').offsetHeight && e.deltaY > 0) {
|
const scrollPosition = window.innerHeight + window.scrollY;
|
||||||
// Scrolling down at bottom
|
const pageHeight = document.querySelector('#main').offsetHeight;
|
||||||
if (infiniteState.hasMore && !infiniteState.loading) {
|
const distanceFromBottom = pageHeight - scrollPosition;
|
||||||
if (tts < scroll_treshold) {
|
|
||||||
const foot = document.querySelector("div#footbar");
|
// Load more when within PRELOAD_OFFSET pixels of bottom
|
||||||
if (foot) {
|
if (distanceFromBottom < PRELOAD_OFFSET && infiniteState.hasMore && !infiniteState.loading) {
|
||||||
foot.style.boxShadow = "inset 0px 4px 0px var(--footbar-color)";
|
loadMoreItems();
|
||||||
foot.style.color = "var(--footbar-color)";
|
|
||||||
}
|
|
||||||
tts++;
|
|
||||||
} else {
|
|
||||||
loadMoreItems();
|
|
||||||
tts = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (window.scrollY <= 0 && e.deltaY < 0) {
|
|
||||||
// Scrolling up at top - could load previous page if needed (optional)
|
|
||||||
tts = 0;
|
|
||||||
} else {
|
|
||||||
tts = 0;
|
|
||||||
const foot = document.querySelector("div#footbar");
|
|
||||||
if (foot) {
|
|
||||||
foot.style.boxShadow = "unset";
|
|
||||||
foot.style.color = "transparent";
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user