developarvin
developarvin

Reputation: 5087

JQuery - How to check if a scrollbar is at the bottom for all browsers

How do you check in JQuery if an element has his scrollbar at the bottom? The html structure is something like this

<div class="container">
 <ol class="list">
     <li class="item">Item 1</li>
     ....
 </ol>
</div>

.container is the one that gets a scrollbar if the items under ol.list goes over the defined height.

Upvotes: 1

Views: 4531

Answers (2)

Attila Szeremi
Attila Szeremi

Reputation: 5478

Check whether the container's scrollTop() jQuery value is equal to the domelement's scrollHeight minus the container's height. Then the scrollbar is at the bottom.

http://jsfiddle.net/KxZDK/2/

EDIT: since in IE7, scrollHeight would actually be smaller than the height rather than be equal to the height if the contents would be smaller, so use larger than equal to make the result always be true even if there is no scrollbar.

I also updated the fiddle link.

Upvotes: 8

sushil
sushil

Reputation: 2671

You can use the function mentioned below to get the height of the container and use this height to compare against the defined height to know if there are scrollbar or not.

$('.list').height() 

Upvotes: 0

Related Questions