jQuery : how to determine that a div is scrolled down

Question

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

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 ?

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.

A way (actually two ways...) to compute the scrollbar size has been given there.

score 11 · Accepted Answer · answered Jun 12 '09 at 14:16

11

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

answered Jun 12 '09 at 14:16

Shaun Humphries

1,070
9
15

I'm getting a 17 pixel difference between elementHeight and scrollPosition when completely scrolled down. Think it's scrollbar height + some borders ? – glmxndr Jun 12 '09 at 14:19
Is there a horizontal scrollbar? That sounds about the height of the scrollbar. – Shaun Humphries Jun 12 '09 at 14:21
Yes it seems to be the scrollbar height. I'll post another question to know how to get this scrollbar height on any browser. – glmxndr Jun 12 '09 at 14:28
1

Safari: 16px, IE7: 20px ... Personally I just account for 20 extra, or you could check browsers and then give it the right number. – Ryan Florence Jun 12 '09 at 14:30
2

Not so simple, depends on the theme used on the OS. – glmxndr Jun 13 '09 at 12:34

score 3 · Answer 2 · answered Feb 17 '12 at 22:50

3

You can know if the div is scrolled down by simply doing this:

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

It works on Firefox, Chrome and IE8

answered Feb 17 '12 at 22:50

Zelenova

276
3
7

score 1 · Answer 3 · answered Jun 12 '09 at 14:11

1

No jQuery needed to get that info:

element.scrollTop;

In a scroll event of your DIV, use that info to check against the height of the element, if it matches (or is close to matching) do whatever you want.

answered Jun 12 '09 at 14:11

Ryan Florence

13,361
9
46
63

Actually it's not the height of the element but the difference between inner's height and container's height. Is it not ? – glmxndr Jun 12 '09 at 14:14
I'm saying the same thing as Shaun. But instead of looking for == I would do something sloppy like `elementHeight <= scrollPosition + 20` to account for the horizontal scroll bar. If you find success with your other question (finding the size of the scroll bar) you would use that instead of my sloppy 20. – Ryan Florence Jun 12 '09 at 14:47

score 0 · Answer 4 · edited Jun 21 '13 at 09:14

0

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

edited Jun 21 '13 at 09:14

Code Lღver

15,573
16
56
75

answered Sep 12 '12 at 16:24

Yene Mulatu

2,226
1
17
13

score 0 · Answer 5 · edited May 23 '17 at 11:53

You just need to use the scrollHeight property of the div instead of height. The function isScrollBottom() which Shaun Humphries wrote previously can be put like this

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

score 0 · Answer 6 · edited Jun 20 '20 at 09:12

0

This is not limited to divs:

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

from MDN Element.scrollHeight. There's also a nice demo on that page.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 25 '16 at 12:40

A.J.Bauer

2,803
1
26
35

score -1 · Answer 7 · answered Dec 09 '15 at 10:40

-1

I think, simply

$(this).scrollTop()

would do the trick.

answered Dec 09 '15 at 10:40

bits.spidey

11
3

jQuery : how to determine that a div is scrolled down

7 Answers7

Linked

Related