javascript - 如何判断垂直滚动条是否到达网页底部？

Question

同样的问题在 jQUery 中得到了回答，但我正在寻找没有 jQuery 的解决方案。 How do you know the scroll bar has reached bottom of a page

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

我正在使用 Firefox3.6

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

问题是 scrollHeight() 返回 1989。

并且内部循环 scrollTop 每次迭代递增 200。

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

并且从 1715 开始，它不会递增，所以这个循环会一直持续下去。

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

代码:

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

Answer 1

当你告诉一个元素滚动时，如果它的 scrollTop(或任何适当的属性)没有改变，那么你不能假设它已经滚动到了它能够滚动的极限吗？

因此您可以跟踪旧的 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
    }
}