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

Question

Javascript：如何检测浏览器窗口是否滚动到底部？我需要检测用户是否滚动到页面底部。如果它们位于页面底部，当我向底部添加新内容时，我会自动将它们滚动到新的底部。如果他们不在底部，他们正在阅读页面上较高的先前内容，所以我不想自动滚动它们，因为他们想要留在原地。如何检测用户是否滚动到页面底部或是否在页面上滚动更高？

Answer 1

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

见演示

Answer 2

所有主要浏览器支持的更新代码（包括IE10和IE11）

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }};

当前接受的答案的问题是window.scrollY在IE中不可用。

下面是一个报价MDN关于scrollY：

对于跨浏览器兼容性，请使用window.pageYOffset而不是window.scrollY。

一个工作片段：

window.onscroll = function(ev) {

    if ((window.innerHeight + window.pageYOffset ) >= document.body.offsetHeight) {

        alert("you're at the bottom of the page");

    }

};

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

注意mac

根据@Raphaël的评论，由于偏移很小，因此mac存在问题。
以下更新条件有效：

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

我没有机会进一步测试，如果有人可以对这个具体问题发表意见，那就太棒了。

Answer 3

接受的答案对我不起作用。这样做：

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稍微更好支持的别名。