如何检测浏览器窗口是否滚动到底部？

问题出现的原因：

- 之前的解答没有对我起作用

- 不适用于IE10/11的浏览器

解决方法：

使用以下代码来检测浏览器窗口是否滚动到底部：

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
      // you're at the bottom of the page
      console.log("Bottom of page");
    }
};

如果要支持旧版本的浏览器（IE9），可以使用别名`window.pageYOffset`，它有更好的兼容性。

对于IE浏览器的支持，可以查看Dekel的答案。

其他答案在我滚动页面时每次都会触发`console.log()`，而不仅仅是在页面底部时触发。这个答案对我在Chrome浏览器上起作用。

如果您去掉`window.scrollY`，因为在IE或Edge浏览器中不起作用，这个答案是个不错的选择。替换为：`(window.innerHeight + window.pageYOffset) >= document.body.scrollHeight`。

即使将body设置为100%的最小高度，这个解决方法也适用。

如何检测浏览器窗口是否滚动到底部？

在当前的解决方案中存在一个问题，即在IE中不支持window.scrollY。

为了实现跨浏览器兼容性，应使用window.pageYOffset代替window.scrollY。

下面是一个可工作的代码片段：

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        alert("你已经滚动到页面底部");
    }
};

根据ël的评论，mac存在一个小的偏移问题。

下面的更新条件可以解决这个问题：

(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

在FF、Chrome、IE10和Chrome for Android上经过确认可正常工作。

有些浏览器中可能会出现1像素偏差的问题，我们需要增加额外的像素才能使其正常工作。

在mac上，下面的条件无法满足要求：

(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

感谢ël的评论，我已经相应地更新了答案。

最终的解决方案是：

(window.innerHeight + Math.ceil(window.pageYOffset + 1)) >= document.body.offsetHeight

当用户在浏览器中更改缩放级别时，可能会遇到问题。可以通过以下方式解决：

Math.ceil(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight

如果body元素的高度设置为100％，则无法正常工作。

抱歉，我应该更具体一些，html元素也需要设置为100%高度。这是一个可行的示例：jsfiddle.net/jontrausti/qd95vcf3

ël的评论解决了我的问题！在mac上存在一个1像素的问题，他的评论真的帮助我解决了这个问题！非常感谢你！祝福你！

我引用了MDN的内容：pageYOffset属性是scrollY属性的别名：window.pageYOffset === window.scrollY; // 始终为true

如何检测浏览器窗口是否滚动到底部？

问题原因：该问题的出现是因为需要在网页中判断用户是否已经滚动到页面的底部，以便进行相应的操作。

解决方法：下面是一些解决该问题的方法和注意事项：

1. 使用window.onscroll事件监听滚动事件。

2. 使用(window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight来判断是否已经滚动到了页面的底部。

3. 该方法在除了IE浏览器外的所有主要浏览器中都能正常工作。

4. 如果html/body元素设置为100%（使得body填充整个视口高度），该方法将无法正常工作。

5. 对于IE浏览器，使用document.documentElement.scrollTop代替window.scrollY。不确定IE的哪个版本支持window.scrollY。

6. 在Chromium版本47.0.2526.73上无法正常工作。

7. 作者在自己的情况中使用了document.body.scrollHeight而不是offsetHeight（在作者的情况下，offsetHeight始终小于window.innerHeight）。

8. Safari浏览器不支持document.documentElement.scrollTop，但支持window.scrollY。

9. 某些情况下该方法已经过时。

10. 在react-native webview中也可以使用该方法。

11. 对于现代浏览器，可以使用documentElement的scroll height来代替body的offset height或scroll height。即(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight。

以上就是如何检测浏览器窗口是否滚动到底部的一些方法和注意事项。