How to allow Infinite Scrolling through "Views Load More" module with waypoints?

Question

I am trying to achieve infinite scrolling for my view results in Drupal.

Now It could have been easier if I could use Views Infinite Scroll module but I couldn't use as it doesn't allow Views Ajax. Since I am using filters that heavily rely on AJAX, I am out of luck for using this module.

As I read, there is another option through Views Load More module, but it can only allow infinite scroll through Waypoints. This is where my problem lies as I am unable to understand how to use waypoints with Views Load More module.

I'll be super grateful if you could assist me in this.

This is Waypoints code from their site:-

var waypoint = new Waypoint({
  element: document.getElementById('#waypoint'),
  handler: function(direction) {
    console.log('Scrolled to waypoint!')
  }
})

Answer 1

It's actually really easy to do with standard Views and jQuery.autopager in your theme.

The most important part is using the correct classes, I can't find my working example at the moment, but it should look something like:

$.autopager({
  // where contents would be appended.
  // use "appendTo" or "insertBefore"
  appendTo: '.views-content',

  // a selector that matches a element of next page link
  link: '.pagination .next a:first',

  // a selector that matches page contents
  content: '.views-row',
});

Answer 2

You can have a try for Views Infinite Scroll module as now, its in stable 8.x-1.3 version.