CODEWITHSUNDEEP
javascriptjquerymobilescroll
Antony D'Andrea
Antony D'Andrea

Reputation: 1004

$(document).innerHeight() and $(window).innerHeight() not working on mobile

I am trying to do something when user scrolls to the bottom.

This snippet of code works on the desktop.

But on my Android 4.3 Google Chrome and on iPhone Safari, it is not resolving the if statement to true, but I can confirm that it does reach there.

I am using jQuery 1.11.0, but I have tried this with 1.7.2 as well.

$(window).scroll(function() {
    if ($(window).scrollTop() === $(document).innerHeight() - $(window).innerHeight()) {
        //Do Stuff
    }
});

Also, I have put:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Upvotes: 1

Views: 3931

Answers (1)

James Hibbard
James Hibbard

Reputation: 17765

I think the problem may be that mobile browsers don't run any JavaScript whilst the viewport is moving.

This means that unless you stop the scroll EXACTLY on the document height (no bouncy bottom thing) it would very UNLIKELY to equal the same heights.

Try changing the === to >= and see if that makes a difference.

Upvotes: 3

Related Questions