スクロールでデータの自動ロード機能を実装するにはどうすればよいですか？

Question

私はこのような2日間のためにこれに固執されています。私はトピックのリストを表示しています。すべてうまくいっていますが、ページの一番下にスクロールするたびに、人気のあるソーシャルメディアサイトのように、データをリストに追加したいと考えています。

は、ここで私は、その関数を呼び出して、私のjs機能

function loadMoreTopics() { 
    alert("hi"); 
} 

ここに私のget-topic.php

<?php 
include_once 'resources/Wall.php'; 
$Wall = new Wall; 
global $databaseConnection; 
$username_get = mysqli_query($databaseConnection, "SELECT * from tableTopics order by columnTopicId desc limit ".$topicsPerPage.""); 
$numberRows = mysqli_num_rows($username_get);/* get the total number of rows and put it in a variable */ 
$loopCount = 1; 
$html .= ' <div class="topics-box">'; 
while ($name = mysqli_fetch_array($username_get)) {/* loop through the topics */ 
    $topicId = $name['columnTopicId']; 
    $topicTitle = $name['columnTopicTitle']; 
    $getPic = $Wall->getTopicPicture($topicId); 
    $html .= ' <div class="topic-header"> 
        <img class="topic-picture" src="'.$getPic.'"> 
        <a class="topic-title">'.$topicTitle.'</a> 
        <a class="topic-action-button"><div class="icon-more topic-action-button-icon"></div></a><a class="topic-follow-button"><div class="icon-footprints topic-follow-button-icon"></div>Follow</a> 
       </div> 
       <div class="topic-stats"> 
        <div class="topic-right-stat">54k Followers</div> 
       </div>'; 
    if ($loopCount < $numberRows) { 
     $html .= '<div class="topics-border"></div>'; 
    } 
    $loopCount ++;/* add 1 to the loop count everytime */ 
} 
$html .= ' </div>'; 
echo $html; 
?> 

であるときには、このコードを使用して、ページの下部にユーザーがスクロール。

 jQuery(window).scroll(function() { 
      if (jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height()) { 
       loadMoreTopics(); 
      } 
     }); 

私はAjaxのいくつかの例を使用しようとしましたが、それらのどれも私のために働いていません。どのAjax関数を使うべきですか？助けてください。

Answer 1

jQuery Scrollbox pluginをご覧ください。望ましい機能を簡単に実装するために使用することができます。あなたのhtmlのコンテナを定義して、次のコードを使用してください：

var $container = $('#content-container'); 

$container 
    .on('reachbottom.scrollbox', function() { 
     $.ajax({ 
      // options like url, dataType etc. 
     }).done(function (response) { 
      $container 
       .append(response) 
       .scrollbox('update'); 
     }); 
    }) 
    .scrollbox({ 
     distanceToReach: { 
      y: 100 
     } 
    }); 

Answer 2

同じように多くのプラグインが用意されています。

$(function() { 
    loadResults(0); 
    $('.country').scroll(function() { 
     if($("#loading").css('display') == 'none') { 
     if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { 
      var limitStart = $("#results li").length; 
      loadResults(limitStart); 
     } 
     } 
    }); 

function loadResults(limitStart) { 
    $("#loading").show(); 
    $.ajax({ 
     url: "request.php", 
     type: "post", 
     dataType: "json", 
     data: { 
      limitStart: limitStart 
     }, 
     success: function(data) { 
       $.each(data, function(index, value) { 
       $("#results").append("<li id='"+index+"'>"+value+"</li>"); 
      }); 
      $("#loading").hide();  
     } 
    }); 
}; 
}); 

Working Demo

Reference Code

：あなたは次のようにjqueryのを使用して自分でそれを実装することができます