Infinite Scrolling using Custom Code

Hello,

I am interested in building a grid-style website with Webflow that loads new content as the user scrolls down (infinite scrolling).

Essentially, the goal is to build a very long page that doesn’t need to load all content at once for faster page load.

Please let me know how this could be accomplished with custom code.

Will from WebFlow support shared the following link via email jQuery Unveil - A very lightweight plugin to lazy load images and asked me to create a inquiry here.

Thanks

Sent you a private message :smile:

1 Like

Mind sharing your solution? I believe the purpose of the forum is so that solutions are available for others that may need it.

Cheers

Hi, I don’t have any solution yet, but will definitely share it.

Hi @webdes, Can you please update your post with some more information so we can help you faster? Things like your read-only link, screenshots, and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance! :slight_smile:

1 Like

@thewonglv

Thanks, here you go:
https://preview.webflow.com/preview/geekwrapped?preview=11bfb774fe712ccea989247d9db750f2

Environment: 100% Webflow (including hosting)

You can also see the page live here: www.geekwrapped.com

Hi @thewonglv Just wanted to check in if you need any additional information for this topic. It’s becoming a little time sensitive, so I would appreciate any help, thank you.

@makloon Yes, I definitely and most certainly agree! :blush:

– So it took me some time, but I’ve finally managed to make a working demo, of an Webflow infinite scrolling website. I’ve been a little bussy lately, my exams are on and so… :smile: Now, it’s not all perfect as I metion also as well on the demo site, but the basic functionality is there! :blush: It works using the Infinite Scroll plugin (www.infinite-scroll.com).


How to do it!:



Making the basic page

On the first page, where you have the container for the content that you want to be loaded (using Infinite Scroll), you add a “next link” at the bottom of the page, linking to a new page.

This page that your link, is linking to, must be a new page on your site, containing only the next section of content that you wish to be loaded into your first page. On this page, there is then another “next link”, linking to the next page, with the next section of content, that you wish to be loaded onto your page, using infinite scroll. On that page there will then be another “next link” linking to the next section of content tha you wish to be loaded in to your first page, using infintie scroll. And so on…

So you basicly just add seperate pages, containing only the next section/piece of content that you want loaded onto your site (the first page). And then links connecting these different pages. Including a link on the first page, of course.

The plugin will then, so to speak, take care of the rest, and load the content of the pages, into your first page, one after one, and that, with a loading-spinner appearing before every load (this can of course be modified in the settings of the plugin). So you thereby get the Infinte Scroll effect that you want.

It might just be 'little easier to understand, seeing the demo in design mode, so you can see the construction and the pages:
https://preview.webflow.com/preview/grid-style-infinite-scrolling-example?preview=fdd039e7139a456a6ee7f0c9f5056daf
(And please forgive me about it, but the logic of classes on this site aren’t all neat. Could be a little better… never mind :blush: :lollipop: :computer: )

Adding the plugin :rocket:

In the Custom Code tab, under settings (Adding custom code to your webflow sites header, see how to do it here) add this to your header-code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/infinite-scroll/infinite-scroll/master/jquery.infinitescroll.min.js"></script>
<script>

$.noConflict();
jQuery(document).ready(function($){
  $('.scroll').infinitescroll({
      navSelector  : '.next',    // selector for the paged navigation
      nextSelector : '.next a',  // selector for the NEXT link (to page 2)
      itemSelector : '.product-row',     // selector for all items you'll retrieve
      animate      : true,
      loadingText  : "", 
      maxPage:undefined,
      loading: {
          finishedMsg: 'No more content to load!',
          img: 'http://i.imgur.com/4zOIFXZ.gif',
          msgText: " "
        }
      });
});
</script>

– On the demo, and here on this github page: GitHub - metafizzy/infinite-scroll: 📜 Automatically add next page and on www.infinite-scroll.com there are more documentation on how to use the plugin. Some tutorials can also be found as well, online. :blush:

Oh, and here is the actual demo! :

Go rockets, and rabbits! :rocket: :rabbit2:
http://grid-style-infinite-scrolling-example.webflow.io


There might possibly, be some, smarter methods, to do this. But this is what I’ve managed to do. And it’s a start.

  • Would love to see some of the code-gurus here on the forum making an better and improved version :smile:

Best to you all! Love n’ hugs from Denmark! :denmark:
Jonatan.

1 Like

@Jonatan_Ronsholdt First of all, amazing work, this is extremely helpful for the entire Webflow community!
Thanks!

Quick question: Is it possible to replace the “Next” button with an automated process that loads more content as the user scrolls down? Thanks

1 Like

Great work @Jonatan_Ronsholdt! @webdes is right, this is very helpful for the entire community! Would you be open to submitting your super awesome tutorial in our Tips and Tricks category of the forum? :slight_smile:

Simply awesome. Thank you so much for your time and effort. I will come back to this I know it.

Hey @Jonatan_Ronsholdt, awesome man, thanks so much !

Cheers,
Dave

Thanks to al, for the very nice feedback :smile:
Just made another, auto scrolling, version here:

:coffee: Auto scrolling version

http://infinite-scrolling-example-auto-load.webflow.io
https://preview.webflow.com/preview/grid-style-infinite-scrolling-example?preview=c7c1a8da17b0891862849b18493ade27

Hope you like it :sunny: Let there be scrolled! :computer: :lollipop: :watermelon: :strawberry: :rocket:



Best to you all! Love n’ hugs from Denmark! :denmark:
Jonatan.

2 Likes

So, done :blush:



@Jonatan_Ronsholdt, you are keeping busy :wink: good job and thanks again ! This is very helpful. Cheers, Dave

Can you kindly make the preview link live. Because it is returning a 404 error. Thanks. Good share.

Got it implemented without hassle. Nice Share.

done :blush:



This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.