Jquery ile sayfada aşağıya doğru scroll yapıldığında server a request yapmak

Temmuz 2012 | Burhan Çetinkaya, Yazılım Geliştirme Uzmanı
Birçok sitede fark etmişsinizdir sayfada aşağıya doğru scroll yapıldığında yükleniyor kutusu çıkartıp daha fazla bilgi gösterilir. Örneğin; pinterest.com da aşağıya doğru scroll yaptığınızda size daha fazla pin gösteriyor. Kısaca sizin daha fazla göster diye bir butona tıklatmadan aşağıya scroll yaptığınızı anlıyor ve bir sonraki sayfadaki verileri sizin için sayfaya yüklüyor. İşte böyle bir senaryoyu jquery ile nasıl yapılabilinir onu göstermek istiyorum.
Olay iki kısımdan oluşuyor:




  1. Scroll pozisyonunun sayfanın aşağısına doğru gelip gelmediğini anlayan fonksiyon : nearBottomOfThePage()
  2. Sayfa üzerinde scroll yapıp yapmadığımızı anlayabilmemiz için jquery nin $(window).scroll(); event handler ını kullanıyoruz.
Kod:

var isDataLoaded = false;
var index = 0;
function nearBottomOfThePage() {
return $(window).scrollTop() > $(document).height() - $(window).height() - 200;
}
$(window).scroll(function(){
if (isDataLoaded) { return; }
if(nearBottomOfThePage())
{
index++;
isDataLoaded=true;
alert(index + ". sayfa yüklendi");
//Serverdan gelen data sayfaya append edilebilinir.
}
});