Question

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

关于如何解决这个问题的最佳理论是首先计算身体元素的高度：

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>

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

有什么想法吗？

Answer 1

我想如果你坚持使用$（'body'）。height（），你应该没问题。

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

如果你有位置，你可能会看到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

使用窗口和正文之间的jQuery.height（）计算差异

1 个答案: