Auto load next page on scroll

Design help Custom code
1

I was wondering whether it’s possible to make a new page load automatically once the user scrolls to the bottom of the page and discard the previous one, like here: http://renvoye.com/case-micai

I have managed to create an infinite scroll but although it makes the transition to a new page automatically it also keeps the previous page in the browser above it.

Live site:
https://infinite-scroll-test.webflow.io/

Read only:
https://preview.webflow.com/preview/infinite-scroll-test?utm_source=infinite-scroll-test&preview=18c46b56076ed34d19a4e9c4d827163e

Any tips?

1 Like
2

Nice effect. Looks like some custom code was used… especially to change the URL in the browser address bar.

3

Hi @Asaf_Ovdat,
apparently you managed to do it. How did you achieve it and do you think it’s also possible with only CMS Pages (e.g blog posts)?

4

Hi @creatspot,
I did not managed to make the previous page disappear, it’s still there if you scroll up.
And what i did worked without CMS, just a regular page, though you can definitely use CMS.

5

Hi @Asaf_Ovdat, now I get what you mean. But I think your site is perfect for a usecase I want to imitate and which is also used by VICE magazine (The 'GoT' Creators Have Hidden the Show's Ending in... a Spotify Playlist?)

What kind of custom code did you use?

6

You can find it here:
https://infinite-scroll.com/
It’s full of features but i can’t remember from which part i took mine.

7

@Asaf_Ovdat I checked out your read only site that scrolls the different pages through infinite scroll but could not see how you used the code. Can you either make the project clonable or share the way you made that? thanks a lot!!!
R

8

Hey @Reda_Ben, I applied this custom code to the projects footer code:

<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>

<script> 
 var nextPages = [
  'page1',
  'page2',
  'page3',
  'page1',
];
  
// init Infinite Scroll
$('.container').infiniteScroll({
  path: function() {
    return nextPages[ this.loadCount ];
  },
  append: '.article',
  status: '.scroller-status',
  hideNav: '.pagination',
  scrollThreshold: 0,
});

</script>```
1 Like