Javascript 在HTML5部分中滚动自动加载AJAX

我一直在一个网站上工作，该网站可以从滚动的MySQL数据库中自动加载新内容。 但问题是，即使滚动可以忽略不计，它也会加载新内容。我的意思是，它会在卷轴上加载新内容，而不是在我到达页面末尾时可滚动部分位于静态帧内。

jQuery代码：

  <script type="text/javascript">
      $(document).ready(function() {
        var track_load = 0; //total loaded record group(s)
        var loading  = false; //to prevents multipal ajax loads
        var total_groups = <?php echo $total_groups; ?>; //total record group(s)
        $('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;}); //load first group
        $("#frames").scroll(function() { //detect page scroll
          if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
          {
            if(track_load <= total_groups && loading==false) //there's more data to load
            {
              loading = true; //prevent further ajax loading
              $('.animation_image').show(); //show loading image
              //load data from the server using a HTTP POST request
              $.post('autoload_process.php',{'group_no': track_load}, function(data){
                $("#results").append(data); //append received data into the element
                //hide loading image
                $('.animation_image').hide(); //hide loading image once data is received
                track_load++; //loaded group increment
                loading = false; 

              }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                alert(thrownError); //alert with HTTP error
                $('.animation_image').hide(); //hide loading image
                loading = false;

              });

            }
          }
        });
      });
    </script> 

$（文档）.ready（函数（）{
var track_load=0；//加载的记录组总数
var load=false；//防止多路径ajax加载
var total_groups=；//记录组总数
$（'#results'）.load（“autoload_process.php”，{'group_no'：track_load}，function（）{track_load++}）；//加载第一个组
$（“#帧”）.scroll（函数（）{//检测页面滚动
if（$（窗口）.scrollTop（）+$（窗口）.height（）==$（文档）.height（））//用户是否已滚动到页面底部？
{
如果（轨道荷载假设以下标记有一些变化：

<div class="container">
    <div class="scroll-content">
        <p>Scroll container</p>
    </div>
</div>

以下是一种跟踪滚动位置并在一定范围内触发ajax调用的方法：

$('.container').scroll( function() {
    var fromtop = $(this).scrollTop(),
        height = $(this).find('.scroll-content').innerHeight() - $(this).innerHeight();
        // In the above line we're finding the height of the scrollable content
        // and subtracting the height of the viewable area (or parent container).

    if ((height - fromtop) < 50) {
       alert('trigger ajax call'); 
    }
});

$（'.container'）。滚动（函数（）{
var fromtop=$（this）.scrollTop（），
高度=$（this）.find（'.scroll content'）.innerHeight（）-$（this.innerHeight（）；
//在上面的一行中，我们找到了可滚动内容的高度
//并减去可视区域（或父容器）的高度。
如果（（高度-从顶部算起）<50）{
警报（“触发ajax调用”）；
}
});

<50
表示您的触发范围。请将其更改为最适合您的应用程序的范围

此方法的优点是，在加载更多内容后，将重新计算内部容器的高度

这里有一个
建议您使用此插件：
$('.container').scroll( function() {
    var fromtop = $(this).scrollTop(),
        height = $(this).find('.scroll-content').innerHeight() - $(this).innerHeight();
        // In the above line we're finding the height of the scrollable content
        // and subtracting the height of the viewable area (or parent container).

    if ((height - fromtop) < 50) {
       alert('trigger ajax call'); 
    }
});