How To Implement Infinite Scroll Using JQuery, Ajax and PHP

You

may have looked profile feeds of well known social networking sites like FaceBook and LinkedIn. They are using infinite scroll to display latest feeds. When you reach at bottom of page it updates relative feeds and so on. It loads new content via Ajax when the user has finished scrolling through the page’s existing content.

Now a days, Ajax infinite scroller takes places of traditional paginations. This technique also known as lazy scroll. One of my reader have requested tutorial of Ajax Infinite Scroller. In this post we will learn how to integrate simple infinite ajax scroller.

Demo Download

Directory Structure

index.php ajax.index.php js/ --jquery.min.js css/ --style.css

ajax.index.php

By getting request parameters form ajax, It creates HTML response to append in scroller.

<?php
        if (!empty($_POST['page'])) {
                sleep(1);
                echo "<li class='marginbottom10'>Page - ".$_POST['page'].'</li>';
                exit;
        }
?>

<?php

if (!empty($_POST['page'])) {

sleep(1);

echo "<li class='marginbottom10'>Page - ".$_POST['page'].'</li>';

exit;

}

index.php

Add <div> having class cls-scroller and include latest version of jQuery (Download jQuery). cls-loader shows loading status.

<body>
        <h2>Infinite AJAX scroller</h2>
        <div class="cls-scroller">
                <li>AJAX scroller Demo</li>
        </div>
        <div class="cls-loader">loading...</div>
        <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
</body>

<body>

<h2>Infinite AJAX scroller</h2>

<li>AJAX scroller Demo</li>

</div>

<div class="cls-loader">loading...</div>

</body>

Ajax Call

page provides page number for database records.

<script type="text/javascript">
        var page = 1;
        $(document).ready(function() {
                $(window).scroll(function() {
                        if ($(document).height() - w.height() == w.scrollTop()) {
                                $('.loading').show();
                                $.post('ajax.index.php', {page: page}, function(data, textStatus, xhr) {
                                        page++;
                                        $('.cls-scroller').append(data);
                                        $('.loading').hide();
                                });
                        }
                );
        });
</script>

var page = 1;

$(document).ready(function() {

$(window).scroll(function() {

if ($(document).height() - w.height() == w.scrollTop()) {

$('.loading').show();

$.post('ajax.index.php', {page: page}, function(data, textStatus, xhr) {

page++;

$('.cls-scroller').append(data);

$('.loading').hide();

});

}

);

});

</script>

index.php (Full Code)

<body>
        <h2>Infinite AJAX scroller</h2>
        <div class="cls-scroller">
                <li>AJAX scroller Demo</li>
        </div>
        <div class="cls-loader">loading...</div>
        <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
</body>   

<script type="text/javascript">
        var page = 1;
        $(document).ready(function() {
                var w = $(window);
                w.scroll(function() {
                        if ($(document).height() - w.height() == w.scrollTop()) {
                                $('.loading').show();
                                $.post('ajax.index.php', {page: page}, function(data, textStatus, xhr) {
                                        page++;
                                        $('.cls-scroller').append(data);
                                        $('.loading').hide();
                                });
                        }
                });
        });
</script>