如何确定垂直滚动条是否已到达网页底部？

Question

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

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

我在用 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
    }
}

Answer 2

我只是阅读了jQuery源代码,看起来你需要"pageYOffset".然后,您可以获得窗口高度和文档高度.

像这样的东西:

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

如果yLeftToGo为0,那么你就在底部.至少这是一般的想法.

Answer 3

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

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

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