Feature Infinite scroll upwards

[fieg]

Description
Allow to load previous pages when scrolling upwards. This has been requested many times in the past. Implementing this in a cross-browser way is quite complex and might need special html markup.

Related issues: #274 #220 #280 #186 #173 #179 #40 #207 #134

Example
http://scrollsample.appspot.com/items

Alternatives
V2 previously supported the prev method which could prepend the previous page, but only after pressing a trigger.

[zissop]

Any news on this? I think it's quite basic functionality for infinite scroll and much needed.

[fieg]

While pretty basic functionality, it's actually quite complex to implement this right, due to how browsers render web pages. Right now I don't have any updates on this.

[awagner-mainz]

@fieg any news here? Or would you know if the source code for the example page you posted (http://scrollsample.appspot.com/items) is available somewhere?

[ruslyrossi]

Hi @fieg thanks for the great library, we would like to purchase this but found this issue. Do you have any estimation in your mind when this issue will be solved?

[awagner-mainz]

Normally, I'm going with the AGPL non-commercial scenario for my website, but - depending on how much you'd ask for - I could imagine contributing financially to the development of this feature. Would that help, @fieg ?

[fieg]

I'm thinking to give this a shot in the comming weeks. No guarantees tho. Feel free to motivate me by buying a license.

[fieg]

I made some progress on this feature today, but it still needs more work.

In the meantime I would like to ask if you want to beta test this feature. If so, please fill out this form:
https://docs.google.com/forms/d/e/1FAIpQLScAFPEGXct65NSkh_O4MoCNYbpqjx9XytW3CuoScLC_IYbOyw/viewform

Thanks!

[fieg]

Hello folks!

With a major delay (sorry about that) I hereby present you Infinite Ajax Scroll 3.1.0-beta.1 with upwards scroll support! The implementation of this feature is a proof of concept, and I can really use your feedback.

You can leave your feedback in the comments below.

Example

You can check out an example of upwards scroll in this codesandbox:
https://codesandbox.io/s/github/webcreate/infinite-ajax-scroll/tree/3.1.0-beta.1/examples/articles

You can open /page3.html in the codesandbox browser and see that the previous pages are prepended when you scoll up.

Getting started

Install the new beta version from npm or unpkg.

Given the following html:

<a href="/page/1" class="pager__prev">Prev</a>
<span class="pager__current">2</span>
<a href="/page/3" class="pager__next">Next</a>

You can now configure the previous link, like this:

let ias = new InfiniteAjaxScroll(/*..*/, {
  next: '.pager__next',
  prev: '.pager__prev'  // <------ That's it!
})

Internals

I want to give you a bit of insight on why I consider this a proof of concept and why I want your feedback. This feature works as follows:

1. When you scroll up it detects that you reached the top of the page
2. It loads the previous page in the background
3. It captures the current scroll position
4. It prepends the previous page into the DOM
5. The previous step will cause the scroll position to change and makes the page jump (this is how browsers work)
6. It then adjusts the scroll position to where it was at step 3

To prevent the issues in step 5 it does all of this really fast in a new animation frame, making it barely noticeable. This is what I want to validate with this beta. So again, I love to hear your feedback!

[ch2856]

Tested on joomla category blog.
When I click back after click on an article, it return to the the last pagination URL and it dose not load more when scroll up.

[fieg]

Thank you for the feedback! Can you host it somewhere so I can debug it?

[awagner-mainz]

Thank you a lot, this seems to work really well! I have deployed it here (you should be able to navigate to other points in the file with the "Seite" pagination dropdown or the "Inhalt" table of contents modal window, or also browse other works on the platform):
https://id.test.salamanca.school/texts/W0011:2.2.1.2.2

Will continue testing.

One thing I found out: While I can have several pagination elements (one above and one below the main content) and address them with their classname pagination: '.iasPagination', the same is not possible for the spinner element. Identifying via classname instead of id works, but there is an error if more than one element are identified by classname (if there is only a single element belonging to the class, then there's no problem)...

[fieg]

Thank you for your response @awagner-mainz! I'm glad to hear that things work well.

I find your case for multiple pagination and spinner elements interesting and will reconsider the "only a single element" restriction. I'll get back to you on that later.

Let me know if you find new things while you continue testing this.

[ch2856]

I will need to upload it to an online test server, will do it later this week, for now you can see it in action in the clip:

https://www.youtube.com/watch?v=dj9y8_0I0Vo&ab_channel=%D7%9E%D7%93%D7%99%D7%A0%D7%98

[fieg]

Thank you for sharing the video. It is still a bit hard to see what actually happens. When you return to the previous page it seems to scroll downwards and upwards again. Is that happening automatically or are you scrolling manually?

If you could upload it to a test server where are can manually interact with it, that would be very helpful.

[nathanielperales]

Hi @fieg,

Thank you for this! I found that if I had this in my css:

html { scroll-behavior: smooth; }

It was causing issues with auto scrolling up or down. I've since removed it and it seems to be working correctly. I've implemented it here: https://mohawk-testing.myshopify.com/collections/testing password is mohawkb (once you enter the password, go back to the link).

I currently have it paginating 48 products (contemplating paginating less to speed up load time). Also due to carousels being set up for every product, I had to use appended & prepended events to enable the carousels for correct sizing when items get written to the dom.

I switched it from 48 products to 24 products to see if that would remove the jumping on return to page. It seems that when I hit the back button after clicking on a product, it jumps the scroll a bit lower than I was previously on, I think because it's loading the previous page. That's the only bug I've really found so far. May be slight confusing for some users, but I'm going to see if based on the amount of items will make it less jumpy when you hit back.

One of the things I'm noticing that's different from your test link is that mine keeps the ?page=2 string at the end of the url, even when I'm all the way at the first page (when you click on a product and hit the back button). Wondering if that might be an issue with the way my pagination is set up? I noticed on your share link, it's auto updating the pagination links as you scroll, which could be adding to the issue? Any insight would be greatly appreciated.

I use the default pagination provided by Shopify which outputs:

<div class="pagination">
   <span class="page current">1</span> 
   <span class="page">
      <a href="/services/liquid_rendering/resource?page=2" title="">2</a>
   </span> 
   <span class="next">
      <a href="/services/liquid_rendering/resource?page=2" title="">Next &raquo;</a>
   </span>
</div>

And I'm using:

window.ias = new InfiniteAjaxScroll('.products-grid', {
  item: '.product',
  next: '.next a',
  prev: '.prev a',
  pagination: '.pagination',
  negativeMargin: 1000
});
ias.on('appended', (e) => {
  loadNewCarousels();
});
ias.on('prepended', (e) => {
  loadNewCarousels();
});
// update title and url then scrolling through pages
ias.on('page', (e) => {
  document.title = e.title;

  let state = history.state;
  
  history.replaceState(state, e.title, e.url);
});

Seriously amazing work.

[fieg]

Thank you for your response @nathanielperales. I did a quick look and see the issues you described. I'll try to dig a bit deeper in the coming days. I'll keep you posted.

[giannik]

If page 1 has the list items already sorted by descending order and I want to scroll up and show the next page (which is the next list items chronologically sorted correctly) how can I acheive that ?
Thank you

[fieg]

@giannik first make it work server-side with regular pagination (prev and next links), then follow the instructions here: #466 (comment)

[fieg]

@nathanielperales I think it might have to do with the images. Can you try to give the images (or its container) a fixed height?

[ghost]

Any update on when this might be out of beta?

[fieg]

Thank you for bringing this to my attention.

I'm happy to announce that Infinite Ajax Scroll 3.1.0 is released and now available from all sources:

• https://github.com/webcreate/infinite-ajax-scroll/releases/tag/3.1.0
• https://www.npmjs.com/package/@webcreate/infinite-ajax-scroll/v/3.1.0
• https://unpkg.com/browse/@webcreate/infinite-ajax-scroll@3.1.0/

Thank you for your support!