在窗口和正文之间使用 jQuery.height() 计算差异

Question

我有兴趣确定用户何时到达页面底部以触发自定义回调事件，类似于“无限滚动”或“无限滚动”。

关于如何解决这个问题，我最好的理论是首先计算 body 元素的高度：

var bodyHeight = $('body').outerHeight();

接下来，测量窗框的高度：

var winHeight = $(window).height();

最后确定垂直滚动位置：

var scrollY = $(window).scrollTop();

但是，当我将此脚本插入正文时：

<script>
console.log(bodyHeight, winHeight);
$(window).bind("scroll", function(){
console.log(winHeight + scrollY);
});
</script>

我经常会看到计算出来的滚动位置超过了body的高度。我在使用带有“弹性滚动”的 OSX 时看到了类似的东西，但这只是使用标准的滚动条 ui。

有什么想法吗？

Answer 1

我认为如果你坚持使用 $('body').height()，你应该没问题。

$('body').height() - $(window).height() == $('body').scrollTop()

如果您有 position:absolute、position:fixed 或 float 元素，您可能会看到 scrollTop() 已关闭。在这种情况下，你的 body 元素实际上并没有包裹最高的元素，所以它不起作用。

如果是这样，您实际上可以使用scrollHeight。

document.body.scrollHeight - $(window).height() == $('body').scrollTop()

看起来 jQuery 没有 scrollHeight 方法（或等效方法），并且存在一些浏览器兼容性问题 (W3C Dom Compatibility for scrollHeight)，但它适用于所有现代浏览器。

最坏的情况，您可以获取所有元素，循环遍历它们以找到最大高度，然后将其用于：

var maxHeight = ((function() { var maxHeight = 0; $('*').each(function() {
    maxHeight = Math.max($(this).height(), maxHeight);
}); return maxHeight; })());

maxHeight - $(window).height() == $('body').scrollTop()

如果您使用这种方法，我强烈建议您缓存该值并仅在需要时更新它。

JSFiddle