負載和刪除根據滾動方向和高度

的內容的網頁我有像這樣的簡單數據網格：負載和刪除根據滾動方向和高度

<div class="uiGridContent"> 
    <table> 
     <tbody id="page-1"> 
      <tr> 
       <td>Cell 1</td> 
       <td>Cell 2</td> 
       <td>Cell 3</td> 
      </tr> 
     </tbody> 
    </table> 
</div>

*注意我在單獨的表頁眉和頁腳中的div上方和uiGridContent下面DIV。這個例子不是必需的。

var nextPage = 1, lastScrollTop = 0, st; 

$('.uiGridContent').scroll(function(){ 

    var st = $(this).scrollTop(); 

    // We're scrolling down 
    if (st > lastScrollTop){ 

     if($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent')[0].scrollHeight && nextPage < 10) { 

      $.ajax({ 
       url: '<?php echo $appurl; ?>?page=' + nextPage, 
       success: function(data) { 
        nextPage = nextPage + 1; 
        var content = $(data).find('.uiGrid tbody').html(); 

        $('.uiGridContent tbody').last().after('<tbody id="page-'+nextPage+'">'+content+'</tbody>'); 

       }, 
       error: function(data) { 

        alert(data); 

       } 
      }); 

     } 

     lastScrollTop = st; 


    // We're scrolling up 
    } else { 

     if($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height()) { 

      var pageToRemove = $('.uiGridContent tbody').last(); 

      if(pageToRemove.attr('id') != 'page-1') { 
       pageToRemove.remove(); nextPage = nextPage - 1; 

      } else { 
       $('.uiGridContent').scrollTo(0,0); 
      } 

     } 

     lastScrollTop = st; 

    } 

});

的想法是，當用戶向下滾動表時，將在接下來的頁面，當他們到達的gridcontent DIV最後TBODY的底部加載。 工作正常！

問題在於備份滾動。如果計劃是爲了讓這個當用戶滾動備份過最後一個TBODY再次刪除它，直到他們最終只有一個剩餘TBODY（原來在這種情況下）。實際發生的，一旦是因爲他們開始滾動起來它消除了所有的人，除了第一個，有時錯過了向上滾動，並讓用戶頂端而不刪除所有其他tbodys。

任何想法？我認爲問題在於if語句：

if($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height()) {

下的向上滾動部分。

來源

2013-10-15 Cameron

是啊，你說得對，問題是在if聲明中使用的條件：

if ($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() >= $('.uiGridContent tbody').last().height())

這是詢問是否的.uiGridContent的scrollTop的再加上它的.innerHeight()比的高度大最後tbody元素。這類似於詢問是否可滾動窗格的底部是最後tbody元素的高度以下，如果它被定位在.uiGridContent頂部。這不是你想要的。

你想要的是問滾動窗格的底部是否高於最後一個tbody元素的頂部。既然你只關心最後一個，你可以使用：

if ($('.uiGridContent').scrollTop() + $('.uiGridContent').innerHeight() <= ($this[0].scrollHeight - $('.uiGridContent tbody').last().height()))

雖然你真的想被緩存的重複調用$(...)，因爲我在這個演示：

http://jsfiddle.net/anmkU/3/

，你可能要爲你使用它，無論到緩存scrollBottom（該內容的底部和可視區域的底部之間的距離）的想法，它可能有助於將R eadability：

http://jsfiddle.net/anmkU/5/

來源

2013-10-18 10:06:51 BYossarian

負載和刪除根據滾動方向和高度

回答

相關問題