2

我试图检测用户何时滚动到文档底部。我当前的解决方案在桌面浏览器中运行良好，并且在横向模式下使用 Mobile Safari（我还无法解释 1px 的差异）。但是，在横向模式下，Mobile Safari 得到了完全不同的结果。

我在这里有一个工作示例：http: //dl.dropbox.com/u/5634676/checkbottom.html

检测例程归结为：

if ($(window).scrollTop() + $(window).height() >= $(document).height())) {
  // Bottom reached
}

您能否解释这两种模式之间的区别并帮助我可靠地检测用户何时滚动到文档底部？

更新

我已经更新了链接示例，修复了 theflyingbrush 指出的错误。横向和纵向模式的结果现在更接近了（但仍然存在 52 像素的无法解释的差异）。但重要的是，对于纵向和横向模式，仍然无法检测到滚动到页面底部。

4

2 回答 2

2

我在 IOS 移动设备上遇到了同样的问题。将“文档”替换为“正文”解决了我的问题。

if($(window).scrollTop() + $(window).height() > $('body').height() - 200 )

此外，最好检查屏幕是否“靠近”底部。

于 2015-04-28T01:36:53.350 回答
1

当设备方向改变时，窗口的高度会改变，从而使存储在文档中的 windowHeight 变量失效。通过监听orientationchange事件并重新计算窗口高度来更新它。就像是：

window.addEventListener("orientationchange", change);

function change(){
    windowHeight = $(window).height();
}

编辑：混淆这一点，因为它还涉及视口比例。这是一个工作版本的链接：http: //appunit.co.uk/scroll

您需要在计算中考虑地址栏的高度，因为 $(window).scrollTop() 在地址栏滚动到屏幕外之前返回 0。因此，将地址栏高度 (60px) 添加到 scrollTop 以获得滚动距离。如果您没有在 html 中设置视口元标记并指定 width=device-width，这将变得更加复杂。在这种情况下，视口将从 320x356 缩放到 980x1091，并且地址栏占用的虚拟高度也会被缩放。概括：

var scaleFactor = ($(window).height()/356).toPrecision(2);
// toPrecision(2) prevents rounding error..
var addressBarHeight = 60 * scaleFactor;

// and when calculating scrollTop
var scrollTop = addressBarHeight + $(window).scrollTop();
于 2013-01-28T17:35:47.340 回答