Question

我正在尝试检测用户何时滚动到文档底部。我目前的解决方案在桌面浏览器中工作正常，而Mobile Safari在横向模式下工作（具有1px差异，我无法解释）。但是，我在横向模式下为Mobile Safari获得了完全不同的结果。

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

检测程序归结为：

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

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

更新

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

Answer 1

我在IOS移动设备上遇到了同样的问题。替换＆＃39;文件＆＃39;与＆＃39;身体＆＃39;解决了我的问题。

＆＃13;

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

＆＃13;

另外，最好检查一下是否接近＆＃39;屏幕下方。

Answer 2

当设备方向改变时，窗口的高度会发生变化，使存储在doc ready上的windowHeight var无效。通过侦听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();

无法可靠地检测iPhone纵向和横向模式之间的滚动底部

2 个答案: