Làm thế nào để phát hiện vị trí cuộn của trang bằng cách sử dụng jQuery

Question

Tôi đang có chức năng jQuery sau trong trang web của mình, nó sử dụng chức năng window.scroll() để nhận ra khi nào các cửa sổ thay đổi vị trí cuộn và thay đổi chức năng gọi để tải dữ liệu từ máy chủ.

Vấn đề là chức năng .scroll() được gọi ngay sau khi có thay đổi nhỏ ở vị trí cuộn và tải dữ liệu ở dưới cùng, tuy nhiên điều tôi muốn đạt được là tải dữ liệu mới khi vị trí cuộn/trang đạt đến dưới cùng, giống như là xảy ra cho nguồn cấp dữ liệu Facebook.

Nhưng tôi không biết cách phát hiện vị trí cuộn bằng jQuery?

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

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

Answer 1

Bạn có thể trích xuất các vị trí cuộn sử dụng jQuery's .scrollTop() method

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

Answer 2

Bạn đang tìm kiếm window.scrollTop() chức năng.

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

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

Answer 3

Kiểm tra ở đây 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(); 
    } 
}); 

Answer 4

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

Đây là một cách khác để nhận được giá trị của cuộn.

Answer 5

Lưu giá trị của cuộn dưới dạng thay đổi trong HiddenField khi xung quanh PostBack truy xuất giá trị và thêm cuộ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" /> 

Answer 6

Bây giờ mà làm việc cho tôi ...

$(document).ready(function(){ 

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

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

}) 

nó hoạt động tốt ... và sau đó bạn có thể sử dụng JQuery/TweenMax để theo dõi các yếu tố và kiểm soát chúng.