I thought I’d share our approach to implementing infinite scrolling using jQuery on https://sideprojects.net and how it could be applied to other s...
For further actions, you may consider blocking this person and/or reporting abuse
Hi,
thank you for this post. Most of the time I am a backend developer, but have to work on frontend code from time to time. Which is why I really like these little "How to's"
It really took me a while to understand this line of code
First thing that I do not quiet understand is that the boolean result of
is devided by
scrollHeight
, I wouldn't consider this clean code. The division itself does not even add anything to the logic. The result of the division is checked to be zero. The result will only be zero if the check ofreturned fales. Which means we could just write:
I would even go further and change the operators, reuslting in:
Am I missing something?
Few improvements here:
to make it even better, we can make it execute before hitting the bottom and again executing only once:
Check an example: fullscreen-modal.azurewebsites.net
Dude! i made an account here just to thank you men, i spend a whole day trying to make this script work with a custom post type in wordpress, i end up in this article again after close it (i didn't read the comments the first time) and i realize that the main problem for me was "if(((scrollHeight - 300) >= scrollPos) / scrollHeight == 0)".
The script ran like four times every time, i just use your code but with my ajax and bum! thanks a lot good man
Awesome! I'm glad it helped you!
Nice work! Have you seen the IntersectionObserver API? It might allow you to simplify this code even further 😁
Would strongly second checking out the IntersectionObserver API. Scroll handlers can come with a lot of performance bottlenecks (even if debounced) in execution that blocks the main thread (js is single threaded in nature), slowing everything else on the page .. you might see stuff work smoothly on a developer desktop but when you test on a low end device like an average phone (what your users may be using), you'll see frame drops and jank :( IOs provide async ways to solve problems like this and has been a great addition to the web! If you absolutely need to use scroll listeners, try exploring if "passive" scroll listeners will work for you.
Ah that looks cool. Will be sure to check that out, thanks!
This is great!
I have a page that is empty (no header/footer or any-body) and is supposed to put everything that comes from an API in an infinity scrollable page.
However, When my page starts with an empty document, it doesn't load anything?
Of course, I can call the function once or twice to initialize with some data.. but is that correct?
You are awesome man.