notify.moe/scripts/InfiniteScroller.ts

40 lines
903 B
TypeScript

import Diff from "./Diff"
export default class InfiniteScroller {
container: HTMLElement
threshold: number
constructor(container, threshold) {
this.container = container
this.threshold = threshold
const check = () => {
if(this.container.scrollTop + this.container.clientHeight >= this.container.scrollHeight - threshold) {
this.loadMore()
}
}
this.container.addEventListener("scroll", _ => {
// Wait for mutations to finish before checking if we need infinite scroll to trigger.
if(Diff.mutations.mutations.length > 0) {
Diff.mutations.wait(() => check())
return
}
// Otherwise, queue up the check immediately.
// Don't call check() directly to make scrolling as smooth as possible.
Diff.mutations.queue(check)
})
}
loadMore() {
const button = document.getElementById("load-more-button")
if(!button) {
return
}
button.click()
}
}