Skip to content

Instantly share code, notes, and snippets.

@beije
Last active March 21, 2020 20:33
Show Gist options
  • Save beije/d669bba6dc3740c2dc81 to your computer and use it in GitHub Desktop.
Save beije/d669bba6dc3740c2dc81 to your computer and use it in GitHub Desktop.
Infinite scroll concept, blog post here: http://benjaminhorn.io/code/how-to-implement-infinite-scroll/
(function($, window, undefined) {
var InfiniteScroll = function() {
this.initialize = function() {
this.setupEvents();
};
this.setupEvents = function() {
$(window).on(
'scroll',
this.handleScroll.bind(this)
);
};
this.handleScroll = function() {
var scrollTop = $(document).scrollTop();
var windowHeight = $(window).height();
var height = $(document).height() - windowHeight;
var scrollPercentage = (scrollTop / height);
// if the scroll is more than 90% from the top, load more content.
if(scrollPercentage > 0.9) {
this.doSomething();
}
}
this.doSomething = function() {
// Do something.
// Load data or whatever.
}
this.initialize();
}
$(document).ready(
function() {
// Initialize scroll
new InfiniteScroll();
}
);
})(jQuery, window);
@sreegodavarthi
Copy link

Thanks, the solution did work but in scrollPercentage > 0.9, if we are making api call then it is getting triggered multiple times.

@Kcko
Copy link

Kcko commented Mar 21, 2020

Because you have to unbind (.off method in JQ) when you get to the end of the page, other you constantly triggering still the same ...

This snippet is not good, complicated and without options.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment