JQuery kullanarak sayfanın kaydırma konumunu algılama

Web sitemde jQuery işlevselliği ile sorun yaşıyorum. Yaptığı şey window.scroll() , pencerenin kaydırma konumunu değiştirdiğini tanımlamak için işlevi kullanması ve değişiklik sırasında sunucudan veri yüklemek için birkaç işlevi çağırmasıdır.

Sorun, .scroll()kaydırma konumunda küçük bir değişiklik olduğunda ve altta veri yüklediği anda işlevin çağrılmasıdır; ancak elde etmek istediğim, kaydırma / sayfa konumu en altta olduğunda Facebook beslemesinde olduğu gibi yeni veriler yüklemektir.

Ama nasıl jQuery kullanarak kaydırma konumunu tespit emin değilim?

function getData() {
  $.getJSON('Get/GetData?no=1', function (responseText) {
    //Load some data from the server
  })
};

$(window).scroll(function () {
    getData();
});

JQuery'nin .scrollTop()yöntemini kullanarak kaydırma konumunu ayıklayabilirsiniz

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // Do something
});

window.scrollTop()İşlevi arıyorsunuz .

$(window).scroll(function() {
    var height = $(window).scrollTop();

    if(height  > some_number) {
        // do something
    }
});

Buradan kontrol edin DEMO http://jsfiddle.net/yeyene/Uhm2J/

function getData() {
    $.getJSON('Get/GetData?no=1', function (responseText) {
        //Load some data from the server
    })
};

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

$(window).scroll( function() { 
 var scrolled_val = $(document).scrollTop().valueOf();
 alert(scrolled_val+ ' = scroll value');
});

Bu, kaydırma değerini almanın başka bir yoludur.

Şimdi bu benim için çalışıyor ...

$(document).ready(function(){

    $(window).resize(function(e){
        console.log(e);                   
    });

    $(window).scroll(function (event) {
        var sc = $(window).scrollTop();
        console.log(sc);
    });

})

iyi çalışıyor ... ve sonra öğeleri izlemek ve kontrol etmek için JQuery / TweenMax kullanabilirsiniz.

PostBack etrafında değer alındığında ve kaydırma eklendiğinde kaydırma değerini HiddenField öğesinde değişiklik olarak saklayın.

//jQuery

jQuery(document).ready(function () {

    $(window).scrollTop($("#<%=hidScroll.ClientID %>").val());

    $(window).scroll(function (event) {
        $("#<%=hidScroll.ClientID %>").val($(window).scrollTop());
    });
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function () {

    $(window).scrollTop($("#<%=hidScroll.ClientID %>").val());

    $(window).scroll(function (event) {
        $("#<%=hidScroll.ClientID %>").val($(window).scrollTop());
    });
});

//Page Asp.Net
<asp:HiddenField ID="hidScroll" runat="server" Value="0" />

Bu kodla tüm sayfaları ekleyebilirsiniz:

JS kodu:

 /* Top btn */
    $(window).scroll(function() {
        if ($(this).scrollTop()) {
            $('#toTop').fadeIn();
        } else {
            $('#toTop').fadeOut();
        }
    });
    var top_btn_html="<topbtn id='toTop' onclick='gotoTop()'>&#8593;</topbtn>";
    $('document').ready(function(){
        $("body").append(top_btn_html);
    });
    function gotoTop(){
        $("html, body").animate({scrollTop: 0}, 500);    
    }
    /* Top btn */

CSS KODU

/*Scrool top btn*/
#toTop{
    position: fixed;
    z-index: 10000;
    opacity: 0.5;
    right: 5px;
    bottom: 10px;
    background-color: #ccc;
    border: 1px solid black;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    color: black;
    font-size: 22px;
    font-weight: bolder;
    text-align: center;
    vertical-align: middle;
}

$('.div').scroll(function (event) {
 event.preventDefault()
 var scroll = $(this).scrollTop();
 if(scroll == 0){
   alert(123)
 }
});

Önceki iletileri yüklemek için chat_boxes için bu kod

Kaydırma Konumu ALIN:

var scrolled_val = window.scrollY;

ALGILAMA Kaydırma Konumu:

$(window).scroll
(
     function (event) 
     {
          var scrolled_val = window.scrollY;
          alert(scrolled_val);
     }
 );