javascript - 当页面缩放(调整大小)时如何检测滚动到底部？

Question

我检测到滚动到底部以加载新页面(此处有一条消息):

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.height) { 
        alert("scrolled to bottom");
    }
};

如果我现在缩放(调整大小)页面的内容，例如图像，(在我的 android 2.2 上)该函数将被触发，而页面的底部实际上并没有被看到。

我尝试使用 document.height 之外的其他属性，希望它们在缩放时会改变，但它们没有:

alert("1="+document.documentElement.clientHeight+
      " 2="+window.innerHeight+
      " 3="+window.outerHeight+
      " 4="+document.body.clientHeight+
      " 5="+document.body.offsetHeight+
      " 6="+document.body.scrollHeight+
      " 7="+document.documentElement.clientHeight+
      " 8="+document.documentElement.offsetHeight+
      " 9="+document.documentElement.scrollHeight);

无论页面在手机上缩放多少，都显示相同的数字。

我想，我会放置一个必须传递的 div，但 div 的位置保持不变，与缩放无关......:

var div = document.getElementById ("mydiv");
var rect = div.getBoundingClientRect ();
x = rect.left;
y = rect.top;
w = rect.right - rect.left;
h = rect.bottom - rect.top;
alert ("left: " + x + " top: " + y + " width: " + w + " height: " + h);

如何检测用户何时真正滚动到底部，例如已经看到完整的图像并进一步滚动...？

Answer 1

当页面滚动到底部时我想加载更多内容时，我遇到了同样的问题。

我通过在页面底部添加一个空元素(在最后加载的内容之后)并检查它是否可见或通过以下命令解决了这个问题:

if($("#LoadIndicator")[0].getBoundingClientRect().bottom < window.innerHeight + 50)
{
    //Processing...
}

LoadIndicator是元素的ID，我认为50像素是到页面底部的距离来加载下一个内容。

希望对你有帮助