Tutorial on Making Infinite Scroll With PHP, MySQL, Jquery TWD Editorial

Infinite Scroll or website pages that when scrolled have no limit because they are made to automatically take (load) new data to be displayed on one page until all the data is downloaded. This infinite scroll replaces the paging function (page numbering) which we often see from the start on various websites.

Infinity Scroll

In this article, Tutorial-webdesign.com will discuss how to make a simple infinite scroll for your website, where we will try to make it in a simple gallery page.

As we know, several websites that apply this infinite scroll model are Twitter, Facebook, Pinterest, Mashable, etc.

First Step: Creating SQL Database

First we need to prepare a database, here as an example we only create one table to accommodate the names of the image files that we want to display, the database name is infinitescroll.

CREATE TABLE scroll_images (
name varchar(255) NOT NULL,
order int(11) NOT NULL,
Creating Index.php Pages

On this index.php page, we don’t really need a lot of HTML tags, if we look at it we only need to create 3 divs with different IDs, of course with a standard HTML structure, put these divs in the body.

Loading More Content

No More Content

We will display 2 images on the index.php page by placing the PHP code for the following sql query at the very top of index.php

$con = mysql_connect(“localhost”, “username”, “password”);

$result = mysql_query(“select SQL_CALC_FOUND_ROWS * from scroll_images order by id asc limit 2”);

$row_object = mysql_query(“Select Found_Rows() as rowcount”);
$row_object = mysql_fetch_object($row_object);
$actual_row_count = $row_object->rowcount;
Ajax with Jquery

Still in the index.php file, we will add Javascript / Ajax with the jquery framework to load other data after the 2 images that we load at the beginning of the website are run, this javascript script is placed in [head] and [/head], previously don’t forgot to include the jquery script which can be downloaded directly from the jquery.com website

varpage = 1;

$(window).scroll(function() {

if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
if($(window).scrollTop() + $(window).height() == $(document).height()) {



    vardata = {
        page_num: page

    var actual_count = "<?php echo $actual_row_count; ?>";

    if((page-1)* 2 > actual_count){
            type: "POST",
            url: "data.php",
            success: function(res) {


There we can see that the script above is used to determine a page with a trigger, namely when the page has reached a certain position, with ajax we retrieve other image data that is processed in the data.php file, here is a php script to perform a sql query to retrieve the image data