jQuery：如何确定一个div是否向下滚动

Question

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

现在是让人头疼的部分，其中一些内部HTML经常出现（确切地说是由tableFilter插件生成的表格页脚）。当不需要时，我想让此页脚消失（实际上超出了包含div的边框）。我决定通过将其z-index设置为-1000来使它消失。但是，当包含的<div>完全滚动到底部时，我想让它出现。

如何知道用户是否滚动到底部？

---

借助下面答案中的帮助，我使用了scrollTop属性，但是scrollTop和innerHeight之间的差异是滚动条的大小加上某些未确定的增量。大多数浏览器在Windows下的滚动条高度为16像素，但在Firefox中我得到了17的差异，在IE中则是20左右，这里我的<div>内容的边框似乎被渲染得更大。 这里提供了两种计算滚动条大小的方式。

- glmxndr

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

- Shaun Humphries

---

完全滚动到底部时，元素高度和滚动位置之间存在17像素的差异。我认为这是滚动条的高度加上一些边框所致？ - glmxndr

有一个水平滚动条吗？听起来就是滚动条的高度。 - Shaun Humphries

是的，看起来是滚动条的高度。我会发另一个问题来了解如何在任何浏览器上获取此滚动条高度。 - glmxndr

Safari：16像素，IE7：20像素......我个人会额外加上20，或者你可以检查浏览器然后给出正确的数字。 - Ryan Florence

不太简单，取决于操作系统使用的主题。 - glmxndr

Answer 2

您可以通过简单地执行以下操作来了解 div 是否向下滚动：

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

它可以在Firefox、Chrome和IE8上运行。

- Zelenova

Answer 3

不需要 jQuery 即可获取该信息：

element.scrollTop;

在您的 DIV 的滚动事件中，使用该信息来检查元素的高度，如果匹配（或接近匹配），则执行您想要的操作。

- Ryan Florence

---

实际上，它不是元素的高度，而是内部高度与容器高度之间的差异。不是吗？ - glmxndr

我和肖恩的意思是一样的。但是我不会像他那样使用“==”，而是会做一些粗略的事情，比如 elementHeight <= scrollPosition + 20 来考虑水平滚动条。如果你在解决另一个问题（查找滚动条的大小）时取得了成功，你可以使用它来代替我的粗略值20。 - Ryan Florence

Answer 4

这不仅限于div：

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

来自 MDN Element.scrollHeight。该页面还有一个不错的演示。

- A.J.Bauer

Answer 5

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

- Yene Mulatu

Answer 6

你只需要使用div的scrollHeight属性而不是height。之前Shaun Humphries编写的函数isScrollBottom()可以放在这里：

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

- user2226623

Answer 7

我认为，简单地说

$(this).scrollTop()

这样就可以解决问题了。

- bits.spidey