如何点击此按钮向下滚动以获得无限滚动？

Question

这里的按钮从数据库加载数据.工作良好.

<li class="getmore" id="'.$post_id.'"><a>Load More  Posts</a></li>

如何在向下滚动到页面底部时自动单击此按钮.只是无限滚动.

我应该使用窗口滚动功能.如果是,那么如何在此代码中执行此操作.

我试过在这个函数中粘贴ajax代码但是没有工作.

编辑: 1.当我把Ajax放在scroll函数中时,它在getmore.php中显示mysql错误.2.如果我在滚动功能中放置了具有单击功能的按钮类,那么它会发射太快以至于多次加载相同的帖子.

$(document).scroll(function(){
  if ($(window).scrollTop() + $(window).height() >= $(document).height()) {

  }
});


$('body').on('click','.getmore',function(){

  var lastelement = $(this ).attr('id');
  			 
  $.ajax({
    type       : 'GET',
    url        : 'getmore.php',
    data       : 'lastelement='+lastelement,
    beforesend :  function(){

      $('.getmore').html('loading....');

    }, 
    success: function(data){
      $('.getmore').remove();
      $('#recs') .append(data) ; 
    }
  });

});

<?php

      $lastelement = $_REQUEST['lastelement' ];
      include("connect2.php");

      if ($lastelement!=''){

        $query   = "SELECT * FROM `posts` "

                 . "WHERE (id < " . $lastelement . " AND "
                 .         "post_keywords like '%home%') " 

                 . "ORDER BY `posts`.`id` DESC  "
                 . "LIMIT 10";

        $records = mysql_query($query);


        if (mysql_num_rows($records)) {
     
          while($record = mysql_fetch_array($records)){

            $cookie_name = 'tcVotingSystem'.$record['id'];
    		$post_title = $record['post_title'];
            $post_id = $record['id'];
            $post_date = $record['post_date'];
            $post_author = $record['post_author'];
            $post_image = $record['post_image'];

            $post_image2 = $record['post_image2'];
            $post_keywords = $record['post_keywords'];
            $post_content = substr($record['post_content'],0,100);
?>

<div>
  //posts goes here
</div>

Answer 1

您想要做的是，一旦滚动到达某个点，按下按钮就会触发相同的 Ajax 请求。因此，不要在滚动上插入单击事件函数，而是触发 Ajax 事件

例子：

$(document).scroll(function(){
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {

    $.ajax({
         type: 'GET',
         url: 'getmore.php',
         data:'lastelement='+lastelement,
            beforesend: function(){
                $('.getmore').html('loading....');
            },       
            success: function(data){
                $('.getmore').remove();
                $('#recs') .append(data) ; 
            }
    });
    }
});

以上只是一个例子。顺便说一句，我建议您为延迟加载 ajax 调用创建一个函数，因为您可能需要多次使用它，即单击和滚动时。

希望这可以帮助