Streaming live at 10am (PST)

Infinite Scrolling using Custom Code


#1

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 http://luis-almeida.github.io/unveil/ and asked me to create a inquiry here.

Thanks


#2

Sent you a private message smile


#3

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

Cheers


#4

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


#5

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: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Thanks in advance! smile


#6

@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


#7

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.


#10

@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: https://github.com/infinite-scroll/infinite-scroll 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! 🇩🇰
Jonatan.


Infinite Scroll - Infinite Scrolling
#11

@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


#12

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? smile


#13

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


#14

Hey @Jonatan_Ronsholdt, awesome man, thanks so much !

Cheers,
Dave


#15

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! 🇩🇰
Jonatan.


Infinite Scroll - Infinite Scrolling
#17

So, done blush




#18

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


#19

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


#20

Got it implemented without hassle. Nice Share.


#21

done blush


#22

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