Javascript/jQuery

Question

'da bir DIV içinde sonsuz/sonsuz kaydırma nasıl yapılır? Burada sonsuz kaydırma sorununu ele alan birkaç soru var. Ancak bunların çoğu eklentileri kullanıyor.

Mevcut sayfalama işlevlerimle çalışacak olan sonsuz kaydırmayı nasıl uygulayacağımı öğrenmek istiyorum. Şu anda "daha fazla yükle" düğmesine bastığımda, tıklandığında, sonraki 10 öğeyi getirecek ve listeye eklenecektir. "Daha fazla yükle" düğmesine tıklandığında bunu yapmak yerine, kaydırma konumu en alta geldiğinde olmasını isterim. Ayrıca, bu liste ana sayfada değil, bir DIV içinde. Sayfa numarasını gizli bir alana 'pageNum' kimliğiyle kaydetme.

$.ajax({ 
     type: "GET", 
     url: "/GetItems", 
     data: { 'pageNum': $('#pageNum').val() }, 
     dataType: "json", 
     success: function (response) { 
       $('#MyDiv ul').append(response.Html); 
       $('#pageNum').val(response.PageNum); 
      } 
     } 
}); 

#MyDiv 
{ 
    border:solid 1px #ccc; 
    width:250px; 
    height:500px; 
    overflow-y: scroll; 
} 

<div id="MyDiv"> 
    <ul> 
    <li>...</li> 
    ... 
    </ul> 
</div> 

Answer 1

basit yolu, dibe ulaştınız olmadığını kontrol etmek ve "yük daha" compleksin daha sonra bir tıklama olayı tetiklemek etmektir.

$(window).on('scroll', function(){ 
    if($(window).scrollTop() > $(document).height() - $(window).height()) { 
     $("#load-more").click(); 
    } 
}).scroll(); 

Yukarıdaki kod yalnızca bir örnektir, üretim ortamınızda kullanmayın.

güncelleme

... ve daha iyi bir yol tetik yerine işlevini çağıran bir olay işlevini aramak. Update2

... ve en iyi yolu: Kullanıcı, eğer yapmak ne karar verelim (bu durumda o değil sonraki ulaşmak için, lütfen sayfanın sonuna ulaşmak için aşağı kayar sayfa);)