jscroll結束時加載數據

Question

我有一些需要無限滾動的UI元素。 所以我在用jscroll 。 我想在div結束時獲取新數據。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src=js/jquery.jscroll.js></script>
<script>

$('.scrollt').jscroll(function(){
    $(".scrollt").load("/handle.php?lastdis=90");});

</script>
</head>
<body>


<?php
include_once('conn.php');

$start=0;
$query="Select * from data where id > ". $start ." Limit 90;";
$res=mysqli_query($con,$query);

echo '<div class="scrollt">';
while ($row = mysqli_fetch_array($res, MYSQL_NUM)) {
    echo "<p> ".$row[0]." &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;". $row[1]."<p><p><p>";
}

echo "</div>"

?>

</body>
</html>

所以基本上我會顯示一個包含90條記錄的頁面，並希望在load（）函數中獲取91條以上的記錄，但這是行不通的。

handle.php代碼

<?php
include_once('conn.php');
$goahead=$_GET['lastdis'];

$query="Select * from data where id > ". $goahead ." Limit 20;";
$res=mysqli_query($con,$query);
while ($row = mysqli_fetch_array($res, MYSQL_NUM)) {
    echo "<p> ".$row[0]." &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;". $row[1]."<p><p><p>";
}

僅僅兩個小時的jquery體驗。請耐心等待。

Answer 1

在window上使用.scroll()事件，如下所示：

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

您可以在此處對其進行測試，這將使窗口頂部滾動，因此將其向下滾動多少，添加可見窗口的高度，並檢查其是否等於整個內容（ document ）的高度。 如果您想檢查用戶是否在底部附近，它看起來像這樣：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

您可以在此處測試該版本，只需將100調整為要觸發的底部像素即可。

現在，與其使用底部的ajax來提醒用戶，不如用底部警告用戶。

  $.ajax({
      url: "handle.php",
      type: "post",
      data: values,
      success: function(data){
           $("#result").append(data);
      },
      error:function(){
          alert("failure");
          $("#result").append('Error Occurred while fetching data.');
      }   
    });

jscroll結束時加載數據

問題描述

1 個解決方案

解決方案1
5 已采納 2013-08-02 16:39:06

jscroll結束時加載數據

問題描述

1 個解決方案

解決方案1 5 已采納 2013-08-02 16:39:06

解決方案1
5 已采納 2013-08-02 16:39:06