如何使用jQuery檢測頁面的滾動位置

121

我在我的網站中使用jQuery功能，它使用window.scroll()函數來識別Windows更改滾動位置更改的時間，並在更改時調用很少的函數來加載數據從服務器。如何使用jQuery檢測頁面的滾動位置

問題是.scroll()只要滾動位置和加載數據在底部有一點變化，函數就會被調用，但是我希望實現的是當滾動/頁面位置到達時，加載新數據底部，就像Facebook feed一樣。

但我不知道如何使用jQuery檢測滾動位置？

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

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

來源

2013-07-03 Maven

218

您可以提取使用jQuery's .scrollTop() method

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

來源

2013-07-03 06:28:46

+21

但你怎麼能這樣做？ –

將事件附加到窗口滾動是一個壞主意：請參閱http://stackoverflow.com/questions/5036850/how-to-detect-page-scroll-to-a-certain-point-in-jquery – hendr1x

+11

收聽窗口滾動本身並不壞。當人們試圖在事件發生時每次發射事件時都會發生。如果您只是將變量的值設置爲當前滾動位置或true/false，然後在事件外使用_those_，則通常應該是黃金。 –

101

您正在尋找window.scrollTop()功能的滾動位置。

這裏

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

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

來源

2013-07-03 06:39:18

檢查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(); 
    } 
});

來源

2013-07-03 07:03:35 yeyene

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

這是獲得滾動的價值的另一種方式。

來源

2014-01-07 05:18:07 safeer008

在回傳周圍檢索該值並添加滾動時，將滾動的值存儲爲HiddenField中的更改。

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

來源

2015-04-14 18:53:29

現在對我的作品......

$(document).ready(function(){ 

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

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

})

它運作良好...然後你可以使用jQuery/TweenMax跟蹤元素和控制它們。

來源

2015-07-28 12:20:10 Andaeiii

請絕對避免詆譭和壞詞。閱讀[幫助]。 –

如何使用jQuery檢測頁面的滾動位置

回答

相關問題