Infinite Scrolling?

Hrm, I know I’ve seen it done, but can’t remember any specifics.

Is your example ajax powered? If so, should be pretty easy.

There should be two parts, the EE template serving up content that responds to pagination (the API), and the javascript that loads and inserts that content when the viewport hits a spot in the viewport, while keeping track of pagination. InteractionObserver is the JS part that watches the viewport. Which part are you stuck on?

Currently using <https://infinite-scroll.com> which works kind of in that it scrolls but can’t get it to respond to the pagination Pxx values properly. It just scrolls endlessly repeating data after total entries has been reached. The pagination URL (Next page link) get stuck on P15 and doesn’t update when scrolling, when P30 and P45 exist.

I’ve been looking at it too long, it’s probably something simple but I can’t see the wood for the trees!

Hm, maybe the path? What do you have for that?

Their example has this:

path: 'news/blog-p{{#}}.html'

So does it need to be

path: 'new/P{{#}}'

I’d also enable debug, it shows you the URL its trying to grab. <https://infinite-scroll.com/options#debug>

Cool thanks Blair, will have a look in a while. I did try the P{{#}} version but couldn’t get it to work, so will try again!

Yeah. The basic issue is that EE doesn’t use page numbers; it uses an offset. So you can’t use Infinitescroll’s {#} to auto-determine the next page. You have two choices:

1. You can use a selector string that grabs the URL of the next page (and that URL is in the results of what you auto-grab each time):

<a href="/page/2class=pagination__next">Next</a>

path: '.pagination__next'

2. You can set the next page path with a function that returns the next batch based on the current batch, like if you had 10 per page as the limit= …:

path: function() {
  let fetchNumber = ( this.{absolute_count} + 1 ) * {limit};
  return `/articles/P${fetchNumber}`;
}

<https://infinite-scroll.com/options#path>

🎉

So I tested the {{#}}version, no joy obviously because of the offset thing Travis!

Tried the path:function method - no luck

The path: 'pagination__next' method works the first time scroll is activated but after that the next page pagination link doesn’t update because the page isn’t refreshed to get the /Pxx slug into the URL.

Scratching my head on this one!

Thanks for your help Travis.

When you tried the path: function(), what URL did it try?

I’m using 15 entries at a time, first scroll console reports P15, next does P16, P17 etc

If you moved the method back to all javascript, would this work?

let pageNumber = ( this.loadCount + 1 ) * 15;
return `/articles/P${pageNumber}`;