Force Scroll function to load only once.

[rasulkireev]

Chris,

Thanks for the code and the video, I appreciate your work!

I am working on the implementation of infinite-scroll in my Django + Stimulusjs app. In my controller I am using your original solution:

var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.offsetHeight)

if (window.pageYOffset >= height - window.innerHeight) {
  this.loadMore(url, entries, pagination)
}

This is supposed to call loadMore when the user scrolls all the way to the bottom. It works fine (https://builtwithdjango.com). The problem I am running into is when browsing with Safari the loadMore function is called more than once, which causes the stimulus-controller add same sites (from same page) multiple times. I end up with duplicates.

Is there a way to tell my controller to call loadMore function only once.

P.S. If I was to change the if statement to run the controller little bit higher than the bottom of the page, say 50px:

if (window.pageYOffset >= height - window.innerHeight - 50) {
  this.loadMore(url, entries, pagination)
}

This would also cause the script to be called more than once. I'm not sure how to stop this behavior. Do you happen to know how to fix this? Thanks a ton in advance.