jQuery：如何确定div向下滚动

我有一个定义高度的div， overflow:scroll; 。 它的内容太长，所以滚动条出现。

现在为ichy部分。 它的一些内部HTML总是奇怪地出现（确切地说，是tableFilter插件生成的表的页脚）。 我想让这个页脚在不需要时消失（它实际上出现在包含

的边框之外）。 我决定让它消失，但将其z-index设置为-1000 。 但是我希望在包含

完全向下滚动时显示它。

我怎么知道用户已在底部滚动？

---

使用下面答案的帮助，我使用了scrollTop属性，但scrollTop和innerHeight之间的区别是滚动条的大小加上一些未识别的delta。 在Windows下的大多数浏览器中，滚动条高16像素，但我在Firefox中有17个差异，在IE中有20个差异，其中我的

内容的边框似乎变得更大。

在那里给出了一种计算滚动条大小的方法（实际上是两种方式……）。

Answer 1

您需要将div高度与scrollTop位置和元素高度进行比较。

 $(div).scroll(function(){ if(isScrollBottom()){ //scroll is at the bottom //do something... } }); function isScrollBottom() { var elementHeight = $(element).height(); var scrollPosition = $(div).height() + $(div).scrollTop(); return (elementHeight == scrollPosition); } 

Answer 2

您只需执行以下操作即可知道div是否向下滚动：

  if ( div.scrollTop + div.clientHeight == div.scrollHeight ){ //... } 

它适用于Firefox，Chrome和IE8

Answer 3

没有jQuery需要获取该信息：

 element.scrollTop; 

在DIV的滚动事件中，使用该信息来检查元素的高度，如果它匹配（或接近匹配）做任何你想做的事情。

Answer 4

 function elementInViewport(el) { var listcontent= $(".listContainer")[0].getBoundingClientRect(); var rect = $(el)[0].getBoundingClientRect(); return [( rect.top >= 0 && rect.left >= 0 && rect.bottom <= listcontent.bottom), ( rect.bottom - listcontent.bottom )] } 

Answer 5

您只需要使用div的scrollHeight属性而不是height。 Shaun Humphries之前编写的函数是ScrollBottom（）可以像这样放置

 function isScrollBottom() { var totalHeight = $("divSelector")[0].scrollHeight; var scrollPosition = $("divSelector").height() + $("divSelector").scrollTop(); return (totalHeight == scrollPosition); } 

Answer 6

这不仅限于div：

 toallyScrolled = element.scrollHeight - element.scrollTop === element.clientHeight; 

来自MDN Element.scrollHeight 。 该页面上还有一个很好的演示。

Answer 7

我想，简单地说

$(this).scrollTop()

会做的伎俩。