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像素视为到页面底部的距离来加载下一个内容。

希望有所帮助

页面缩放（调整大小）时如何检测滚动到底部？

1 个答案: