JQuery: how to determine if a div is scrolling down

Question

I have a div with a certain height and overflow:scroll;. Its contents are too long, so scrollbars appear.

Now for the ichy part. Some of its internal HTML strangely appears all the time (more precisely, the footer of the table created by the tableFilter plugin). I would like this footer to disappear when it is not needed (it actually appears from the border <div>). I decided to disable it, but setting it z-indexto -1000. But I want it to appear when the containing one <div>scrolls completely down.

How can I find out what the user has scrolled below?

---

Using the tooltip below, I used the attribute scrollTop, but the difference between scrollTopand innerHeightis the size of the scroll bar plus some undefined delta. A 16-pixel-high scrollbar in most Windows browsers, but I get a difference of 17 in Firefox and something like 20 in IE, where my content borders <div>seem to get bigger.

A method (actually two ways ...) for calculating the size of the scroll bar was indicated there .

Answer 1

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

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

You can find out if a div scrolls by simply doing this:

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

It works on Firefox, Chrome and 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

scrollHeight div . isScrollBottom(), Shaun Humphries ,

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

Answer 6

divs:

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

MDN Element.scrollHeight. .

Answer 7

,

$(this).scrollTop()

.