Sanjeev K Sanjeev K - 19 days ago 6
CSS Question

Load more data - ScrollTop function not working

I am trying to load data on page scroll and for this I am trying to run the following function

$(window).scroll(function ()
{
if($(document).height() <= $(window).scrollTop() + $(window).height())
{
alert("done")
}
});


The problem is, as per my page setting I have done body overflow:hidden and made a container scrollable, the above code is not working in this case, however when I enable the body scroll then its working fine, can anybody please suggest how to handle this?

Here is the JSFiddle demo

Answer

You need to check the element with class scroller instead of window for scroll position.

$('.scroller').scroll(function ()
    {
      if($('.scroller').scrollTop() >= ($('.scroller')[0].scrollHeight - $(window).height()) )
      {
        alert("load more data")
      }
});

JS Fiddle: https://jsfiddle.net/n0rramke/5/

Comments