With a major delay (sorry about that) I hereby present you Infinite Ajax Scroll 3.1.0-beta.1 with the highly requested upwards scroll support! With this feature, previous pages will automatically be added when you scroll up, all seamlessly and without losing your scroll position.
The implementation of this feature is a proof of concept, and I can really use your feedback. You can leave your feedback in this Github issue:
https://github.com/webcreate/infinite-ajax-scroll/issues/466
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:
- When you scroll up it detects that you reached the top of the page
- It loads the previous page in the background
- It captures the current scroll position
- It prepends the previous page into the DOM
- The previous step will cause the scroll position to change and makes the page jump (this is how browsers work)
- 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!