load data just before you scrolled to the bottom code example

Example 1: ajax call to load a page on scrolling

$(document).ready(function(){
 
 $(window).scroll(function(){
 
  var position = $(window).scrollTop();
  var bottom = $(document).height() - $(window).height();

  if( position == bottom ){

   var row = Number($('#row').val());
   var allcount = Number($('#all').val());
   var rowperpage = 3;
   row = row + rowperpage;

   if(row <= allcount){
    $('#row').val(row);
    $.ajax({
     url: 'fetch_details.php',
     type: 'post',
     data: {row:row},
     success: function(response){
      $(".post:last").after(response).show().fadeIn("slow");
     }
    });
   }
  }

 });
 
});

Example 2: ajax call to load a page on scrolling

<?php

// configuration
include 'config.php';

$row = $_POST['row'];
$rowperpage = 3;

// selecting posts
$query = 'SELECT * FROM posts limit '.$row.','.$rowperpage;

$result = mysqli_query($con,$query);

$html = '';

while($row = mysqli_fetch_array($result)){
  $id = $row['id'];
  $title = $row['title'];
  $content = $row['description'];
  $shortcontent = substr($content, 0, 160)."...";
  $link = $row['link'];
  // Creating HTML structure
  $html .= '<div id="post_'.$id.'" class="post">';
  $html .= '<h1>'.$title.'</h1>';
  $html .= '<p>'.$shortcontent.'</p>';
  $html .= '<a href="'.$link.'" target="_blank" class="more">More</a>';
  $html .= '</div>';

}

echo $html;