2011-04-29 36 views
34

我有一个div溢出:滚动。如何使用JQuery检查div是否一直滚动到底部?

我想知道它是否一直向下滚动。如何使用JQuery?

这一个不工作:How can I determine if a div is scrolled to the bottom?

+2

发现这个通过使用谷歌搜索,很有意思http://yelotofu.com/2008/10/jquery-how-to-tell-if-youre-scroll-to-bottom/ – 2011-04-29 05:39:34

+0

你能解释一下什么发生在你提供的链接不起作用的地方?也许会添加一些标记呢? – 2011-04-29 05:48:00

回答

65

这里是正确的解决方案(jsfiddle)。代码简述:

$(document).ready(function() { 
    $('div').bind('scroll', chk_scroll); 
}); 

function chk_scroll(e) { 
    var elem = $(e.currentTarget); 
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) { 
     console.log("bottom"); 
    } 
} 

有关更多信息,请参见this

+8

这是一个令人讨厌的'alert()'演示:http://jsfiddle.net/Blender/aBc3h/7/ – Blender 2011-04-29 05:51:05

+2

感谢@blender – samccone 2011-04-29 05:56:04

+0

这是一个很好的解决方案。我正在研究一个解决方案,其中包含内容的div可以调整大小,并且我需要在每次调整div大小时重新检查滚动状态,因为它不会每次都触发。是否有这样的事件? – SoonDead 2012-05-22 15:19:02

4

你可以做到这一点的

(scrollHeight - scrollTop()) == outerHeight() 

申请所需的jQuery语法,当然...

0

下面是代码:

$("#div_Id").scroll(function (e) { 
    e.preventDefault(); 
    var elem = $(this);    
    if (elem.scrollTop() > 0 && 
      (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())) { 
     alert("At the bottom"); 
    } 
}); 
1

Since 2012火狐包含scrollTopMax财产。如果scrollTop === scrollTopMax您位于元素的底部。

+0

有趣的是,虽然不被任何浏览器支持(并且看起来不会像以前那样?) – 2015-08-29 05:55:48

11
function isScrolledToBottom(el) { 
    var $el = $(el); 
    return el.scrollHeight - $el.scrollTop() - $el.outerHeight() < 1; 
} 

这是@ samccone的答案的变体,它结合了@ HenrikChristensen关于子像素测量的评论。

+2

这是在任何时候都能在Chrome中正常工作的唯一答案。有了其他答案,它有时可以在Chrome中使用,有时不会(Firefox不会有这个子像素问题,并且始终如此)。 – OMA 2016-06-21 12:20:35

+1

这一个为我工作。谢谢 – OST 2016-08-02 18:55:31

+0

非常好,这个解决方案汇总了上面评论中的每条建议。谢谢! – 2017-01-13 10:10:22

0

没有jQuery的,对于onScroll事件

var scrollDiv = event.srcElement.body 
window.innerHeight + scrollDiv.scrollTop == scrollDiv.scrollHeight 
0

由于工作没有jQuery的那样:

var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight; 

我做的:

var node = $('#mydiv')[0]; // gets the html element 
if(node) { 
    var isBottom = node.scrollTop + node.offsetHeight === node.scrollHeight; 
} 
0

对我来说$el.outerHeight()给出了错误的值(由于边界宽度),而$el.innerHeight()给出了正确的一个,所以我用

function isAtBottom($el){ 

    return ($el[0].scrollHeight - $el.scrollTop()) == $el.innerHeight(); 
}