CODEWITHSUNDEEP
javascriptjquery
112233
112233

Reputation: 2466

Unable to detect if scrolled to the bottom of div

Below is my code(only works in chrome),
all browsers can detect scroll event: $(".container").on('scroll', function() {

But not if its scrolled to the bottom of div(I need help to change this line of code)

if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {

full script:

$(".container").on('scroll', function() {
   if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
      alert('ok');
   }  

})

Tried: 1)

var elem = $(this);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())

2) 

if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].clientHeight) {

Upvotes: 2

Views: 2355

Answers (2)

Pradeep Vig
Pradeep Vig

Reputation: 503

If your div has some padding or margin, you can use outerHeight() instead of innerHeight(), this worked for me:

if((element.scrollTop() + element.outerHeight()) >= element[0].scrollHeight)

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 282030

You can bind the div on scroll and then use

if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)

It works for me.

$(function($)
  {
    $('.container').bind('scroll', function()
                              {
                                if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
                                {
                                  alert('end reached');
                                }
                              })
  }
);

JSFIDDLE

Upvotes: 1

Related Questions