簡體   English   中英

無限滾動不起作用

[英]Infinity Scroll not working

對於我的profile_page.php ,默認情況下,向用戶顯示10個帖子(數據庫中有10行)。 如果用戶有10個以上的帖子,並滾動到頁面底部,則div應該展開以顯示剩余的帖子(最多10個)。 因此,如果用戶總共有13個帖子,則默認顯示10個帖子,然后當用戶滾動到底部時,將顯示其余三個帖子。

那是個主意,但是不幸的是,我的滾動條無法正常工作。 該頁面意識到它已到達頁面底部並執行alert("bottom )`,但未加載更多帖子。

這是infinity_scroll.js

$(document).ready(function(){
    var load = 0;   
    var postLen = $('.userposts_panel').find('.message_wrapper').length;
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()){
            // start AJAX
            if(postLen >= 10){
                load++;
                $.post("inc/ajax.php", {load:load},function (data){
                $(".userposts_panel").append(data); //  class
                        alert ("bottom");
                });
            } // if closed
        } // if closed
        });
    });

顯示帖子的HTML結構(簡化版):

<div class="userposts_panel">
   // below is the div in which each post is displayed
  <?php echo "<div class='message_wrapper'> </div> ?>
</div>

看到alert()起作用了,我開始認為我的ajax.php存在問題-但我只是找不到任何問題。

這是ajax.php(再次是簡化版):

$load = htmlentities(strip_tags($_POST['load']))*10;
$query = mysqli_query ($connect, "SELECT * FROM user_thoughts WHERE added_by='$user' ORDER BY id DESC LIMIT ".$load.",10");

while ($row = mysqli_fetch_assoc($query)) {
    $thought_id      = $row['id'];
    $message_content = $row['message'];
    $date_of_msg     = $row['post_details'];
    $thoughts_by     = $row['added_by'];
    $attachent       = $row['attachment'];

    echo "<div class='message_wrapper'>
      // this is where I will depict all info such as author of post etc.
    </div>";
}
?>

有誰能夠確定我到達頁面底部時為什么不加載更多數據的原因?

編輯

Chrome console.log(數據) 在此處輸入圖片說明

Firefox console.log(數據) 在此處輸入圖片說明

檢查此滾動並嘗試

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM