1

I have an app with content that should be loaded when the user scrolls down (like Twitter/Facebook...).

I'm trying to detect when to load more data based on scroll events and the current scroll position.

I've read this post: https://stackoverflow.com/a/3898152/82609

if($(window).scrollTop() + $(window).height() == $(document).height()) {
    console.error("bottom!");
}

This nearly works but in my case when I scroll to the bottom I have 

$(window).scrollTop() + $(window).height() > $(document).height()

How is it possible that window scrolltop + window height is greater than height? It is not so much greater, just a little bit.

console.error("$(window).scrollTop() + $(window).height()=",$(window).scrollTop() + $(window).height(),"  VS  $(document).height()",$(document).height());

// It gives me in the console:
$(window).scrollTop() + $(window).height()= 877   VS  $(document).height() 872

Very often, when I have scrolled totally to the bottom I get some extra pixels that comes from nowhere. Can someone explain this?

I'm trying to compute the percentage of scrolled content in a container:

    getScrollPercentage: function(scrollableElementSelector) {

        var scrollableElement = $(scrollableElementSelector);

        // This is the number of hidden pixels of the scrollable element inside its container
        var hiddenHeigth;
        if ( scrollableElementSelector === window ) {
            hiddenHeigth = $(document).height() - $(window).height();
        } else {
            hiddenHeigth = scrollableElement[0].scrollHeight - scrollableElement.outerHeight();
        }

        // This is the number of scrolled pixels
        var scrolledHeight = scrollableElement.scrollTop();

        if ( hiddenHeigth < scrolledHeight ) {
            //throw new Error("hiddenHeigth "+hiddenHeigth+" < scrolledHeight " +scrolledHeight + " -> Impossible unless you didn't use this function correctly");
        }

        var scrollPercent = ( scrolledHeight / hiddenHeigth ) * 100;

        if ( this.debug ) {
            console.debug("hiddenHeigth=",hiddenHeigth,"scrolledHeight=",scrolledHeight,"scrollPercent=",scrollPercent);
        }

        return scrollPercent;
    }

This function works pretty well, except when I scroll to the bottom, I often get up to 103% -> Not a big deal for my usecase but I'm trying to understand the problem.

Community
  • 1
  • 1
Sebastien Lorber
  • 89,644
  • 67
  • 288
  • 419

1 Answers1

0

Try to use $(document).outerHeight() instead of $(document).height()

FIDDLE WORKING

Buzinas
  • 11,597
  • 2
  • 36
  • 58
  • I've just added a Fiddle to demonstrate it working ;) – Buzinas Apr 04 '14 at 16:44
  • Thanks but actually it seems not to be the probem. As you can see, this simple fiddle does not reproduce my problem because when you scroll to the bottom, it prints 100% and not 103%: http://jsfiddle.net/pR3ET/1/ – Sebastien Lorber Apr 04 '14 at 18:02
  • Here it prints 100% hehe, what browser are you using? I'm using Chrome here (SS: http://img.ctrlv.in/img/14/04/04/533ef5cd8cd43.png) and I was using Firefox when I did this example. – Buzinas Apr 04 '14 at 18:09
  • Btw, have you even try to update your website with my solution and see if this doesn't work? this thing "extra pixels that come from nowhere" usually are for those outer heights that you should be using. If this doesn't fit your problem, please update your question with your HTML, so I can reproduce your problem here. – Buzinas Apr 04 '14 at 18:19