JQuery检测底部滚动
JQuery检测底部滚动
提问于 2011-11-22 08:01:29
我希望当用户滚动到页面底部时实现内容加载。
我有个问题。它在桌面浏览器上运行得很好，但在移动设备上就不行。我已经实现了一个肮脏的修复来使它在iPhone上工作，但并不是最优的，因为它不能在其他大小的移动设备上工作。
我的网站是www.cristianrgreco.com，向下滚动查看实际效果
问题是在移动设备上添加滚动和高度并不等于高度，而在桌面浏览器上却是这样。
有没有一种方法可以检测移动浏览器？
提前谢谢。
下面是当前正在使用的代码：
$(document).ready(function () {
$(".main").hide().filter(":lt(3)").show();
if ($(document).height() == $(window).height()) {
// Populate screen with content
}
else if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
window.onscroll = function () {
if ($(document).height() - $(window).scrollTop() <= 1278) {
// At the moment only works on iPhone
}
}
}
else {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
// Works perfect for desktop browsers
}
})
}
})回答 10
Stack Overflow用户
回答已采纳
发布于 2012-03-03 06:16:19
对于后来在这里查看的任何人，我通过将height=device-height添加到meta视口标记解决了这个问题：
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">然后，您可以继续使用$(document).scroll(function(){});
这适用于iOS 5
Stack Overflow用户
发布于 2012-05-10 19:33:11
如果你能做到，你真的应该避免尝试达到一个确切的数字。
使用上面Stelok的函数，您可以像这样测试：
if ($win.height() + $win.scrollTop() > (getDocumentHeight()-10)) {它有点柔和-用户可能没有滚动到确切的最后一个像素，但认为他/她在底部。
Stack Overflow用户
发布于 2012-05-16 20:51:47
代码的改进的jQuery版本
var scrollRefresh = {
pastTop: false,
pastBottom: false,
previous: 0,
bottom: function(callback) {
var pBottom = $(window).height() + $(window).scrollTop() >= $(document).height();
if(!this.pastBottom && pBottom) {
callback($(window).height() + $(window).scrollTop());
this.pastBottom = true;
} else {
if(!pBottom) this.pastBottom = false;
}
this.previous = $(window).scrollTop();
},
top: function(callback) {
var pTop = $(window).scrollTop() < this.scrollPrevious && $(window).scrollTop <= 0;
if(!this.pastTop && pTop) {
callback($(window).scrollTop());
this.pastTop = true;
} else {
if(!pTop) this.pastTop = false;
}
this.previous = $(window).scrollTop();
}
}
$(window).scroll(function() {
scrollRefresh.top(function(pos) {
console.log("Loading top. " + pos);
alert("scrolled to top"); //You should delete this line
});
scrollRefresh.bottom(function(pos) {
console.log("Loading bottom. " + pos);
alert("scrolled to bottom"); //You should delete this line
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8220267
复制相关文章
相似问题