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

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

- Meow

---

我意识到大多数解决方案都是基于jQuery的，但如果您正在寻找“无限滚动”效果，仍然可以从它们中获得帮助：http://www.google.com/search?q=infinite+scroll 祝你好运。 - Wesley Murch

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
    }
}

- sdleihssirhc

Answer 2

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

类似这样：

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

如果 yLeftToGo 为0，则表示您已到达底部。至少这是一般的想法。

- beatgammit

---

注意，这在IE上效果不好。我觉得在IE中，你可以使用document.body.scrollTop或其他什么东西。如果你不关心旧浏览器，window.pageYOffset在IE9中也可以使用。 - beatgammit

是的，我发现不同的浏览器使用不同的属性名称。 - Meow

但显然IE不如真正的浏览器准确。= D - beatgammit

Answer 3

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

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

如果第3步为真，则已经到达页面底部。

- Miki Berkovich

---

使用 window.innerHeight 代替 document.body.clientHeight。 - jscripter

Answer 4

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

对于HTML元素(例如div)，添加事件-- onscroll='scrollHandler(this)'。

- Harsh ..

Answer 5

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

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);
}

- Jason Williams

Answer 6

<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>

- Sorin