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

Can't reliably detect scroll bottom between iPhone portrait and landscape modes

本文关键字：模式 横向 之间 滚动 底部 iPhone 检测      更新时间：2023-09-26

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

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

检测例程归结为：

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

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

更新

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

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

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

此外，最好检查屏幕底部是否"接近"。

当设备方向改变时，窗口的高度会发生变化，从而使存储在文档就绪上的窗口高度变量无效。通过侦听方向更改事件并重新计算窗口高度来更新它。像这样：

window.addEventListener("orientationchange", change);
function change(){
    windowHeight = $(window).height();
}

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

您需要在计算中考虑地址栏的高度，因为 $（window）.scrollTop（） 返回 0，直到地址栏滚动到屏幕外。因此，将地址栏高度（60px）添加到scrollTop以获得滚动的距离。如果您尚未在 html 中设置指定宽度=设备宽度的视口元标记，则会变得更加复杂。在这种情况下，视口将从 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();
相关文章：