Question

I want to detect a div (dynamic content div) end, when user scroll down the scroller in jquery.
i use this code but it will call jquery function by each pixel of scroll down.

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

But i want to alert and call function when the div end reach otherwise not alert anything.!
Any idea will be appreciated 🙂 ….Thanx

Answer 1

I have find a solution for this problem, by finding the div height from top to div end, and also finding the total page scroll by .scrollTop() + (window).height() and compare these two values like.

$j(function($j){
      $j('.products').bind('scroll', function()
        {
            var elem = $j('products');
            var divend = elem[0].scrollHeight + elem.offset().top; // full height of div (from top and actual div height).
            var pagescroll = $j(this).scrollTop() + $j(this).height(); // Total page scrolled.

              if(divend <= pagescroll)
              {
                  alert(" Div End reached! ");
                  alert("Full DIV height: "+divend+" Scroll page Height: "+pagescroll); 
              }
       }
   }

SO this is the solution of finding div end when scrolling down by jquery…..
Cheer!