检测滚动条是否到达页面底部 [不使用jQuery]

Question

我想在滚动到页面底部时弹出提示，类似于这样：

$(function(){
  $(document).scroll(function() {
    if($(document).scrollTop() == 0) alert("top");
  })
})

但是不使用 jQuery，在滚动到底部时弹出提示框。

- user1305760

---

纯JavaScript方法检测元素底部 - Harsh ..

答案在此处提供 https://dev59.com/62865IYBdhLWcg3wR8ah - Nazmul Abedin

Answer 1

document.addEventListener('scroll', function (event) {
    if (document.body.scrollHeight == 
        document.body.scrollTop +        
        window.innerHeight) {
        alert("Bottom!");
    }
});

JSFiddle在这里：http://jsfiddle.net/cSer6/

- brendan

---

这段代码并不适用于所有浏览器 - 这里是从多个来源综合而成的完整解决方案（代码中包含URL）：http://jsfiddle.net/W75mP/ - brendan

哪些浏览器不支持这个？你了解移动端吗？ - ncubica

Answer 2

if(window.addEventListener){
    window.addEventListener('scroll',scroll)
}else if(window.attachEvent){
    window.attachEvent('onscroll',scroll);
}

function scroll(ev){
    var st = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
    if(!st){
            console.log('top');
    }else if((st+document.documentElement.clientHeight)>=document.documentElement.scrollHeight ){
           console.log('bottom');
    }
}

例子： http://jsfiddle.net/ampersand/AEnzJ/ 在chrome 17/18、safari 5、ff 10/11.0和ie 7-9中通过http://browserling.com测试。

- ampersand

---

@Tomirammstein 在哪个浏览器中？ - ampersand

现在我有这段代码： document.addEventListener=document.addEventListener || document.attachEvent; document.addEventListener('scroll',function(ev){ if ( document.body.scrollTop === document.body.height ) { console.log('Bottom'); } }); 但是我无法检测到滚动条是否到达文档底部。 - user1305760

@Tomirammstein：我已更新这个新需求的答案，并在 Chrome 18、Safari 5.0.2 和 FF 11.0 中进行了测试。 - ampersand

正如我所说：“在Chrome 18、Safari 5.0.2和FF 11.0中进行了测试。”请在IE8中测试它，并让我们知道你的发现。 - ampersand

我在基于Chrome的浏览器Vivaldi中进行了测试，有时候这个方法可以很好地工作，但是有时候st+document.documentElement.clientHeight会比document.documentElement.scrollHeight略小(1-小数部分)，并且控制台不会打印底部，所以我将其改为Math.ceil(st + document.documentElement.clientHeight)，目前看来效果不错。 - towith

Answer 3

这在IE中对我有效。

document.onscroll = function() {
    if(document.documentElement.scrollTop + window.innerHeight == document.documentElement.scrollHeight)
    {
        alert('bottom');
    }
}

http://jsfiddle.net/cSer6/46/

- Jozef Cechovsky

Answer 4

document.onscroll = function() {
    if(!document.body.scrollTop){
        alert('top');
    }
}

JSFiddle 演示

- Dennis

---

我更喜欢使用.addEventListener('scroll', ...)而不是.onscroll = ...，因为它更灵活，避免与其他事件处理程序发生冲突。不幸的是，在IE≤8中无法使用，但是可以很容易地使用polyfill来实现。 - ephemient

你能在这里发布一个例子吗？ - user1305760

@Tomirammstein 我发布了一个 jsfiddle 演示 - 我没有访问 IE8，但 scrollTop 起源于 MSIE，所以应该可以工作。 - Dennis

但是我需要检测滚动条何时滚动到页面底部 - user1305760

当滚动到页面的底部时，如何检测？ - T J

Answer 5

if (document.body.scrollHeight <= Math.ceil(window.pageYOffset + window.innerHeight)) {

这在Brave浏览器中可行。

- tiller1010

Answer 6

function addEvent(node, type, callback) {
    if('addEventListener' in node) {
        node.addEventListener(type, callback, false);
    } else {
        node.attachEvent('on' + type, callback);
    }
}

addEvent(window, 'scroll', (function() {
    // https://developer.mozilla.org/en/DOM/window.scrollY#Notes
    var stObj, stProp;
    if('scrollY' in window) { // CSSOM:
        // http://www.w3.org/TR/cssom-view/#extensions-to-the-window-interface
        stObj = window;
        stProp = 'scrollY';
    } else if('pageYOffset' in window) { // CSSOM too
        stObj = window;
        stProp = 'pageYOffset';
    } else {
        stObj = document.documentElement.clientHeight ?
            document.documentElement : document.body;
        stProp = 'scrollTop';
    }

    var node = document.documentElement.clientHeight ?
        document.documentElement :
        document.body; // let's assume it is IE in quirks mode
    var lastSt = -1;
    return function(e) {
        if(lastSt !== stObj[ stProp ] && // IE <= 8 fires twice
           node.scrollHeight === stObj[ stProp ] + node.clientHeight) {
            alert('bottom');
        }
        lastSt = stObj[ stProp ];
    };
})());

它已经成功地在Firefox 11、Chrome 17、IE 9（X-UA-Compatible: 8, 7, 5）和Opera 11.60中进行了测试。

- Saxoier

---

这段代码让我的Safari 5和FF 11.0崩溃了。Safari一直弹出无限的警告，而FF则完全卡住了。Chrome 18表现良好。 - ampersand

@ampersand：Fx因为警告而变黑。将其删除，一切都会好起来（由于此错误，我不会从此示例中删除它）。我没有Safari的副本。也许这是类似于IE在怪异模式下的问题。在IE中，document.documentElement.scrollTop始终为零。 - Saxoier

谢谢@Saxoier，但我需要在滚动条到达页面底部时发出警报；无论如何还是谢谢 :) - user1305760

@Tomirammstein：你写道“[...]到达页面的极限[...]”，在你的例子中是 if($(document).scrollTop() == 0) alert("top"); 。我可以看到的是上限而不是下限。请编辑您的问题。 - Saxoier