Javascript 如何判断垂直滚动条是否已经到达网页底部？

How to determine if vertical scroll bar has reached the bottom of the web page?

提问by Meow

The same question is answered in jQUery but I'm looking for solution without jQuery. How do you know the scroll bar has reached bottom of a page

在 jQUEry 中回答了同样的问题，但我正在寻找没有 jQuery 的解决方案。 你怎么知道滚动条已经到达页面底部

I would like to know how I can determine whether vertical scrollbar has reached the bottom of the web page.

我想知道如何确定垂直滚动条是否已到达网页底部。

I am using Firefox3.6

我在用 Firefox3.6

I wrote simple Javascript loop to scroll down by 200 pixel and when the scroll bar reached the bottom of the page, I want to stop the loop.

我写了一个简单的 Javascript 循环来向下滚动 200 像素，当滚动条到达页面底部时，我想停止循环。

The problem is scrollHeight() is returning 1989.

问题是scrollHeight() 返回 1989。

And inside loop scrollTopis incremented by 200 per iteration.

内部循环scrollTop每次迭代增加 200。

200 ==> 400 ==> 600 .... 1715

And from 1715, it won't increment so this loop continues forever.

从 1715 年开始，它不会增加，所以这个循环永远持续下去。

Looks like scrollHeight() and scrollTop() is not right way to compare in order to determine the actual position of scrollbar? How can I know when the loop should stop?

看起来 scrollHeight() 和 scrollTop() 不是为了确定滚动条的实际位置而进行比较的正确方法？我怎么知道循环何时应该停止？

code:

代码：

var curWindow = selenium.browserbot.getCurrentWindow();
var scrollTop = curWindow.document.body.scrollTop;
alert('scrollHeight==>' + curWindow.document.body.scrollHeight);

    while(curWindow.document.body.scrollHeight > curWindow.document.body.scrollTop) {
      scrollTop = curWindow.document.body.scrollTop;
      if(scrollTop == 0) { 
        if(window.pageYOffset) { //firefox
          alert('firefox'); 
          scrollTop = window.pageYOffset; 
        } 
        else { //IE
          alert('IE'); 
          scrollTop = (curWindow.document.body.parentElement) ? curWindow.document.body.parentElement.scrollTop : 0; 
        } 
      } //end outer if
      alert('current scrollTop ==> ' + scrollTop);
      alert('take a shot here'); 
      selenium.browserbot.getCurrentWindow().scrollBy(0,200);

    } //end while

采纳答案by sdleihssirhc

When you tell an element to scroll, if its scrollTop(or whatever appropriate property) doesn't change, then can't you assume that it has scrolled as far as is capable?

当你告诉一个元素滚动时，如果它的scrollTop（或任何适当的属性）没有改变，那么你不能假设它已经滚动到最大程度了吗？

So you can keep track of the old scrollTop, tell it to scroll some, and then check to see if it really did it:

所以你可以跟踪旧的scrollTop，告诉它滚动一些，然后检查它是否真的做到了：

function scroller() {
    var old = someElem.scrollTop;
    someElem.scrollTop += 200;
    if (someElem.scrollTop > old) {
        // we still have some scrolling to do...
    } else {
        // we have reached rock bottom
    }
}

回答by beatgammit

I just read through the jQuery source code, and it looks like you'll need the "pageYOffset". Then you can get the window height and document height.

我刚刚通读了 jQuery 源代码，看起来您需要“pageYOffset”。然后你可以得到窗口高度和文档高度。

Something like this:

像这样的东西：

var yLeftToGo = document.height - (window.pageYOffset + window.innerHeight);

var yLeftToGo = document.height - (window.pageYOffset + window.innerHeight);

If yLeftToGo is 0, then you're at the bottom. At least that's the general idea.

如果 yLeftToGo 为 0，则您处于底部。至少这是一般的想法。

回答by Miki Berkovich

The correct way to check if you reached the bottom of the page is this:

检查您是否到达页面底部的正确方法是：

1. Get document.body.clientHeight= the height of the ACTUAL screen shown
2. Get document.body.offsetHeightor document.body.scrollHeight = the height of the entire page shown
3. Check if document.body.scrollTop= document.body.scrollHeight - document.body.clientHeight

1. Get document.body.clientHeight= 显示的 ACTUAL 屏幕的高度
2. 获取document.body.offsetHeight或 document.body.scrollHeight = 整个页面显示的高度
3. 检查是否document.body.scrollTop=document.body.scrollHeight - document.body.clientHeight

If 3 is true, you reached the bottom of the page

如果 3 为真，则您到达页面底部

回答by Harsh ..

function scrollHandler(theElement){
   if((theElement.scrollHeight - theElement.scrollTop) + "px" == theElement.style.height)
       alert("Bottom");
}

For the HTML element (like div) add the event -- onscroll='scrollHandler(this)'.

为 HTML 元素（如 div）添加事件 -- onscroll='scrollHandler(this)'。

回答by Jason Williams

Here is some code I've used to power infinite scrolling list views:

这是我用来支持无限滚动列表视图的一些代码：

var isBelowBuffer = false;  // Flag to prevent actions from firing multiple times

$(window).scroll(function() {
    // Anytime user scrolls to the bottom
    if (isScrolledToBottom(30) === true) {
        if (isBelowBuffer === false) {
            // ... do something
        }
        isBelowBuffer = true;
    } else {
        isBelowBuffer = false;
    }
});

function isScrolledToBottom(buffer) {
    var pageHeight = document.body.scrollHeight;
    // NOTE:  IE and the other browsers handle scrollTop and pageYOffset differently
    var pagePosition = document.body.offsetHeight + Math.max(parseInt(document.body.scrollTop), parseInt(window.pageYOffset - 1));
    buffer = buffer || 0;
    console.log(pagePosition + "px / " + (pageHeight) + "px");
    return pagePosition >= (pageHeight - buffer);
}

回答by Sorin

<span id="add"></add>

<script>
    window.onscroll = scroll;

    function scroll () {
    if (window.pageYOffset + window.innerHeight >= document.body.scrollHeight - 100) {
            document.getElementById("add").innerHTML += 'test<br />test<br />test<br />test<br />test<br />';
        }
    }
</script>