Hello,

I am trying to create a reverse lazy loading in JQuery for Drupal 7, That means that instead of adding items when the scroll reaches the bottom of the page, I want to add items when the scroll hits the top of the page. This is useful to display past events in a event list.

So far, the script works well except for a bug that I can't resolve. If the user keeps on scrolling its wheel, items will keep on being added. I want to be able to show one item, then stop the scrolling detection for a few seconds, then detect scroll again.

I tried using the setTimeOut function, but it will just add a delay before showing an item.

Here's the code I have so far:

 setTimeout(function(){ $('#events-list .content').on('scroll', function() { var pos = $(this).scrollTop(); if (pos == 0) { var url = '/motelcampo/ajax/pastevents/' + page; $.ajax({ url: url, success: function(data) { page = parseInt(data['0']) + 1; $('#block-motel-events-motel-events-list-block .content').prepend(data[1]); $('#block-motel-events-motel-events-details-block .content').prepend(data[2]); $('#events-list .content').animate( {scrollTop: 5}, 'fast' ); activateMobileProgram(); console.log('ok'); } }); } }); }, 2000);

I hope my question is clear.

Thank you for your precious help.