如何使用jQuery检测页面的滚动位置

我在我的网站上遇到了jQuery功能的麻烦。它所做的是，它使用window.scroll()函数来识别窗口何时改变其滚动位置，并在更改时调用几个函数从服务器加载数据。

问题是.scroll()函数被调用，只要滚动位置有一点变化，并在底部加载数据;然而，我希望实现的是加载新数据时，滚动/页面位置达到底部，就像发生在Facebook feed。

但我不确定如何检测滚动位置使用jQuery?

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


$(window).scroll(function () {
getData();
});
713421 次浏览
小开
最佳答案

你可以使用jQuery的.scrollTop()方法提取滚动位置

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

你正在寻找window.scrollTop()函数。

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


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

查看这里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');
});

这是另一种获取scroll值的方法。

小开

当PostBack检索值并添加滚动时，将滚动值存储为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" />
小开

这对我来说很管用……

$(document).ready(function(){


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


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


})

它工作得很好……然后你可以使用JQuery/TweenMax来跟踪元素和控制它们。

小开

你可以用下面的代码添加所有页面:

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

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

chat_boxes的此代码用于加载以前的消息

小开

GET滚动位置:

var scrolled_val = window.scrollY;

检测滚动位置:

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

提交答案