Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@sreegodavarthi sreegodavarthi commented May 17, 2019

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

@Kcko

This comment has been minimized.

Copy link

@Kcko 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