Hi!
I am using the Blog of the Kirby Starterkit and want to add Infinite Scrolling to the posts. Is there any guide or example for a beginner like me? I can’t seem to find anything that would help me with the Starterkit-Blog.
Me being a beginner means I am good at copy-pasting and changing what needs to be changed (isotope js for example), but writing stuff myself is still a bit too difficult. 
Thanks!
popular question but i do not know about a simple plugin that transforms the starterkit into infinite scroll page. some changes will need to be made.
https://forum.getkirby.com/search?context=topic&context_id=8515&q=infinite&skip_context=true
also consider metafizzys js lib since its easy to setup imho:
This is my personal opinion, but there are very limited good use cases to use infinite scroll (e.g. a site around “content discovery” or when “serendipity” is a huge factor). You also have to take bad SEO into consideration, UI clues for when loading happens, no-js scenario’s, findability of specific content, links, …).
If you really insist on using it I would encourage you to see it as a “progressive enhancement” in an otherwise functional site.
That’s my 2cent 
Thanks for your replies!
Well, I’m going to use infinite scrolling for a grid of images and want to encourage my users to stay on my website by scrolling. I think that’s a useful cafe for infinite scrolling?!
I’ve tried using the js lib, but unfortunately I have no idea how to combine it with the existing pagination. 
Do you know if there is any template with a blog using it? Then I could try understanding how it has to work.
Ive done this recently on a Kirby site for a client, but I used Infninite AJAX scroll. It actually really simple. Build a site with a pager and tell the plugin its class name. It’s that simple. It also means your site is progressively enhanced with the infinite scroll because if javascript fails, the ordinary pager will still work.
Oh, this Infinite AJAX Scroll is indeed pretty nice and it works! Thank you! However, I want to combine it with Masonry and they even have an example of them combined. But apparently I am missing an important part, because the images from page 2 won’t align themselves on the bottom. They make up a new grid with one column starting at the top (behind the images from page 1).
I am still trying to find the solution, but maybe someone has a hint for me.
I know exactly what the problem is. masonary is fired on pageload and builds the grid. When you change to the second batch of infinite items you need get masonary to re-evaluate the items on the page.
Always view the source of demo pages…
<script type="text/javascript">
var container = document.querySelector('.container');
var msnry = new Masonry( container, {
// options
itemSelector: '.item',
gutter: 10
});
var ias = $.ias({
container: ".container",
item: ".item",
pagination: "#pagination",
next: ".next a",
delay: 1200
});
ias.on('render', function(items) {
$(items).css({ opacity: 0 });
});
ias.on('rendered', function(items) {
msnry.appended(items);
});
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>You reached the end!</em></p></div>'}));
</script>
The important bit here is:
ias.on('rendered', function(items) {
msnry.appended(items);
});
Thats a call back telling ajax scroll to kick off masonary again when scroll renders a batch of items.
Also, it kind of sounds like your generating multiple masonary grids. Make sure you take the masonary parent container out of Kirbies for each loop so its generating just the masonary items.
Ah yes! I was thinking that the realigning was missing. Thank you, now that you confirmed the important bits I actually managed to adjust the code for my stuff aaaaaaaand it works! One grid with many grid items.
Such a good feeling! Yay! Thank you!
@wat No worries It’s good when you get something working