jQuery:如何确定div向下滚动 [英] jQuery : how to determine that a div is scrolled down

问题描述

我有一个定义高度的div和overflow:scroll;.它的内容太长，因此会出现滚动条.

I have a div with defined height, and overflow:scroll;. Its content is too long so scrollbars appear.

现在是ichy部分.它的某些内部HTML一直奇怪地出现(准确地说，是由tableFilter插件生成的表的页脚).我想使此页脚在不需要时消失(它实际上出现在包含<div>的边框之外).我决定使它消失，但将其z-index设置为-1000.但是我想使它完全显示在包含的<div>向下滚动时.

Now for the ichy part. Some of its inner HTML strangely appears all the time (to be precise, the footer of a table generated by the tableFilter plugin). I'd like to make this footer disappear when it is not needed (it actually appears out of the containing <div>'s border). I resolved to make it disappear but setting its z-index to -1000. But I want to make it appear when the containing <div> is totally scrolled down.

我怎么知道用户已经滚动到底部?

How can I know the user has scrolled at the bottom ?

使用以下答案的帮助，我使用了scrollTop属性，但scrollTop和innerHeight之间的区别是滚动条的大小以及一些不确定的增量.在Windows下的大多数浏览器中，滚动条的高度为16像素，但是在Firefox中，滚动条的高度为17像素，而在IE中，滚动条的高度为20像素，而<div>内容的边框似乎变得更大了.

Using the help from answers below, I used scrollTop attribute but the difference between scrollTop and innerHeight is the size of the scrollbar plus some unidentified delta. A scrollbar is 16 pixels high in most browsers under Windows, but I get a difference of 17 in Firefox and something like 20 in IE, where my <div> content's borders seems to be rendered bigger.

有.

推荐答案

您需要将div高度与scrollTop位置以及元素高度进行比较.

You need to compare the div height with the scrollTop position and the element height.

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

这篇关于jQuery:如何确定div向下滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！