Implementing Infinite Scroll Pagination Using Laravel & jScroll

Warning: This post is over a year old, so some of this information may be out of date (Bootstrap 3, jScroll 2.3.5 and Laravel 5.2 were used).

Demo

Instead of having to click a link to get to the next set of content, infinite scrolling (also known as lazy loading, endless scrolling, autopager, endless pages, etc.) pulls the next content automatically into view when the reader approaches the bottom of the page.

If you want to implement infinite scroll pagination using Laravel, it's really easy - jScroll (a jQuery plugin written by Philip Klauzinski) is all you'll need.

For example, let's say that we have a comments page with standard Laravel’s pagination, where we are paginating the App\Comment model, and for the sake of simplicity - this model has two (fillable) attributes: author_name and body:

@foreach($comments as $comment)
    <h4>
        {{ $comment->author_name }}
        <small>{{ $comment->created_at->diffForHumans() }}</small>
    </h4>
    {{ $comment->body }}
    <hr>
@endforeach

{{ $comments->links() }}

There are only three things we need to do in order to have an infinite scroll:

1) Wrap it with <div class="infinite-scroll"> </div>:

<div class="infinite-scroll">
    @foreach($comments as $comment)
        <h4 class="media-heading">{{ $comment->author_name }}
            <small>{{ $comment->created_at->diffForHumans() }}</small>
        </h4>
        {{ $comment->body }}
        <hr>
    @endforeach

    {{ $comments->links() }}
</div>

2) Download the latest version of jScroll and initialize it:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/js/jquery.jscroll.min.js"></script>

3) Finally, apply the following script:

<script type="text/javascript">
    $('ul.pagination').hide();
    $(function() {
        $('.infinite-scroll').jscroll({
            autoTrigger: true,
            loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />',
            padding: 0,
            nextSelector: '.pagination li.active + li a',
            contentSelector: 'div.infinite-scroll',
            callback: function() {
                $('ul.pagination').remove();
            }
        });
    });
</script>

Let’s analyze this script:

$('ul.pagination').hide(); - here we hide the page links (numbers) that were rendered by Laravel’s links method ({{ $comments->links() }}).

Next, the jscroll method is called on the selector (class infinite-scroll) for which we want our scrollable content contained within: $('.infinite-scroll').jscroll({.

autoTrigger: true - triggers the loading of the next set of content automatically when the user scrolls to the bottom of the containing element.

loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />' - here we define the HTML to show at the bottom of the content while loading the next set. In this case, loading.gif image will be displayed, and it will be centered by using Twitter Bootstrap's center-block helper class.

padding: 0 - this is the distance from the bottom of the scrollable content at which to trigger the loading of the next set of content.

nextSelector: '.pagination li.active + li a' - here we specify the selector to use for finding the link which contains the href pointing to the next set of content (and that link was generated by Laravel’s links method - {{ $comments->links() }}).

contentSelector is a reference to a selector on the next page that we will be loading. So, in our case it is: 'div.infinite-scroll'.

Finally, at the end of each page load (when there's nothing more to load) we call a function that will remove (take out of the DOM) pagination links generated by  Laravel’s links method ({{ $comments->links() }}):

            callback: function() {
                $('ul.pagination').remove();
            }

And that’s it. Click here for a small demo. Gist is available here.

A note about the potential SEO risk: Any time you implement JavaScript-enabled features (such as infinite scrolling), you run the risk of making it harder for search engines, like Google, Yahoo and Bing, to crawl your site’s content. For more details, I recommend you to read the following article: Infinite Scroll & SEO: Do They Mix? (posted by Kristi Kellogg).

Warning: This post is over a year old, so some of this information may be out of date (Bootstrap 3, jScroll 2.3.5 and Laravel 5.2 were used).