Question

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

现在为ichy部分。它的一些内部HTML总是奇怪地出现（确切地说，是tableFilter插件生成的表的页脚）。我想让这个页脚在不需要时消失（它实际上出现在包含<div>的边框之外）。我决定让它消失，但将z-index设置为-1000。但是我希望在包含<div>完全向下滚动时显示它。

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

使用以下答案的帮助，我使用了scrollTop属性，但scrollTop和innerHeight之间的差异是滚动条的大小加上一些未识别的delta。在Windows下的大多数浏览器中滚动条高16像素，但我在Firefox中有17个差异，在IE中有20个差异，我的<div>内容的边框似乎变大了。

计算滚动条大小的方法（实际上是两种方式......）已经there。

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。函数isScrollBottom（），Shaun Humphries之前写的可以像这样放置

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

会做到这一点。

jQuery：如何确定div向下滚动

7 个答案: