Skip to content

Instantly share code, notes, and snippets.

@kolyaflash
Created October 28, 2014 15:37
Show Gist options
  • Save kolyaflash/7ff416bf634c7e1ea603 to your computer and use it in GitHub Desktop.
Save kolyaflash/7ff416bf634c7e1ea603 to your computer and use it in GitHub Desktop.
iScroll and Infinite Scroll play together when you don't want to change infinitescroll side.
function loaded () {
myScroll = new IScroll('#wrapper', {
scrollX: true, scrollY: false, mouseWheel: true, wheelHorizontal: true,
//snap: 'li',
click: false,
scrollbars: true,
hideScrollbar:false,
});
var infinitescrollElement = $('.all2cart-products_grid');
// First unbind infinitescroll's native sroll spy
infinitescrollElement.infinitescroll('unbind');
function getState() {
return infinitescrollElement.data('infinitescroll').options.state;
}
myScroll.on('scrollEnd', function () {
var timeToLoadNext = function (scroll) {
// We need to load next when we are almost about the end of current page
// So, when only 10 items left - let's start.
var eachItemWidht = 100;
var itemsToNextLoad = 10;
var bufferPx = eachItemWidht * itemsToNextLoad;
var maxScroll = scroll.maxScrollX + bufferPx;
console.log(scroll.x, maxScroll);
return scroll.x <= maxScroll;
}(this);
var state = getState();
if (state.isDestroyed || state.isPause || state.isDuringAjax || !timeToLoadNext) {
return;
};
infinitescrollElement.append('<li id="loading-el"><div></div></li>');
myScroll.refresh();
// We need next page
// So let's retrive it and see what we should to do next
infinitescrollElement.infinitescroll('retrieve');
// Also pause infinitescroll. We'll need it if new scrollEnd come before
// we are done.
infinitescrollElement.infinitescroll('pause');
var refreshCallback = function () {
var state = getState();
if ( ! state.isDuringAjax || state.isDone) {
// next page retrived
clearTimeout(_timeout);
$('#loading-el').remove();
myScroll.refresh();
if (!state.isDone) {
// Resume the pause so we can handle next event
infinitescrollElement.infinitescroll('resume');
} else {
// The end
return;
}
} else {
// still wait
_timeout = setTimeout(refreshCallback, 60);
}
};
// And wait until it's done.
_timeout = setTimeout(refreshCallback, 60);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment