Cách phát hiện vị trí cuộn của trang bằng jQuery

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

Vấn đề là .scroll()chức năng được gọi ngay khi có một chút thay đổi ở vị trí cuộn và tải dữ liệu ở phía dưới; 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 mức thấp nhất, giống như điều đó xảy ra với nguồn cấp dữ liệu của Facebook.

Nhưng tôi không chắc chắn làm thế nào để 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();
});

Bạn có thể trích xuất vị trí cuộn bằng .scrollTop()phương thức của jQuery

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

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
    }
});

Kiểm tra tại đâ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();
   }
});

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

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

Bây giờ điều đó 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 phần tử và kiểm soát chúng.

Lưu trữ giá trị của cuộn khi thay đổi trong HiddenField khi xung quanh PostBack lấy 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" />

Bạn có thể thêm tất cả các trang với mã này:

Mã JS:

 /* 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 */

MÃ CSS

/*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)
 }
});

Mã này cho chat_boxes để tải các tin nhắn trước đó

NHẬN vị trí cuộn:

var scrolled_val = window.scrollY;

DETECT Vị trí cuộn:

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