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

how to detect scroll to bottom when page is scaled (resized)?

本文关键字：缩放 调整 底部 何检测 检测 滚动      更新时间：2023-09-26

我检测到滚动到底部加载一个新页面(这里是一条消息):

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

如果我现在缩放(调整)页面的内容，例如一个图像，(在我的android 2.2上)这个函数被触发，而没有页面的底部实际上已经看到。

我尝试使用文档以外的其他属性。高度，希望它们在缩放时改变，但它们没有:

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);

我如何检测，当用户真的已经滚动到底部，例如已经看到完整的图像，并进一步滚动…?

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

我通过在页面底部(在最后加载的内容之后)添加一个空元素来解决这个问题，并检查它是否可见或通过以下命令: 
if($("#LoadIndicator")[0].getBoundingClientRect().bottom < window.innerHeight + 50)
{
    //Processing...
}

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

希望能有所帮助

相关文章：