Yük ve ben çok gibi basit veri ızgara sahip kaydırma yönü ve yüksekliği

Question

dayalı içerik sayfalarını kaldırın: Yukarıda ve uiGridContent altında div 'ler içinde ayrı tablolarda bir başlık ve alt sahip olduğunu * Not

<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. Bu örnek için gerekli değildir.

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; 

    } 

}); 

onlar gridcontent div son tbody dibine ulaştığında kaydırdığı masanın aşağı olarak, bir sonraki sayfaya yüklenecek temeline dayanır. Hangisi iyi çalışıyor!

Sorun, yukarı kaydırma ile ilgilidir. Planın, kullanıcı son tikiyi geçtikçe geriye kaydırdığı gibi, geriye kalan tek bir tbody ile sonuçlanıncaya kadar tekrar ortadan kaldırdığı zaman (bu durumda orijinali) yapmak. Gerçekte olan şey, yukarı çıkmaya başladıkları anda, ilkini hariç tümleri kaldırır veya bazen yukarı kaydırmayı kaçırır ve diğer tüm tbodileri kaldırmadan kullanıcıyı yukarı çıkarır.

Herhangi bir fikrin var mı? Sorunun, aşağıdaki bölümün altında yer alıyor olduğunu düşünüyorum:

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

.

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

Bu .innerHeight() yüksekliğinden daha büyüktür fark etmez veya .uiGridContent ait scrollTop artı soruyor:

Answer 1

Evet, haklısın, sorun if açıklamada kullanılan durumdur Son tbody öğesi. Bu, kaydırılabilir bölmenin tabanının, .uiGridContent'un en üstünde konumlandırılmışsa son tbody öğesinin yüksekliğinin altında olup olmadığını sormaya benzer. İstediğin bu değil.

Kaydırılabilir bölmenin alt kısmının son tbody öğesinin üst kısmının üstünde olup olmadığını sormak istediğiniz. Yalnızca sonuncusu umurumda olduğundan, kullanabilirsiniz:

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

rağmen gerçekten istiyor $(...) için bu sürekli çağrılarına önbelleğe edilecek ben bu demoda olduğu gibi:

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

Ayrıca, scrollBottom (içeriğin alt kısmı ile görüntülenebilir alanın en altındaki arasındaki mesafe) fikrini önbelleğe almak isteyebilirsiniz. Kalıcılık:

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