jQuery's scrollTop() behaving strange on Android browsers including Chrome

Question

I'm having trouble with an animated scrollbar. The intended behaviour should be on clicking the nav-button, scroll with ease to the end of the page(and a little break near the end).

Now the problem on PC works perfect. On android device (I tried my phone), the scrollTop value and the ($(document.body).height() - $(window).height()) do not match. There is exactly 55px less with the scrollTop thus acting all sorts of strange... Also sometimes it works sometimes it doesn't. I've figured it has something to do with the browser bar collapsing and upsetting the value...but i can't figure it out.

I've tried the following: initializing the variables on scroll event, i've tried vanilla js that didn't work. Need help :) for reference http://www.developer.morningmood.org , also i've printed out the values on bottom of the page if it helps. Here's the code.

contactF = Math.floor($(document.body).height() - $(window).height());
$("#cont").click(function(){
    if ($(document).scrollTop() < contactF && flagScroll==true){ //flag stops other buttons from beying pushed
        flagScroll = false;
        var inter = setInterval(function(){
            var doc = $(document).scrollTop();
            if (doc == contactF){ // this is the final desired position
                clearInterval(inter);
                flagScroll = true;
                pix = 10; //pixels to jump
                return;
            }
            if (doc >= contactF-50){ // this is a break on aproach
                pix = 1;
            }
            $(document).scrollTop(doc + pix);
        }, 10); 
    }
})

EDIT: also to find the bug, you nedd to scroll from the top of the page all the way to the bottom, if from the top of the page you just push the contact button it works. but if you scroll it doesn't, it upsets the value...

You may have to add an event listener for the 'resize' event and/or the 'orientationchange' event. The bar collapsing might emit those events, which you can use to recalculate the values. — mrsq, May 10 '17 at 21:56

score 1 · Answer 1 · answered Feb 16 '18 at 19:38

Had the same exact problem and spent a whole day to figure it out. You are right about the address bar collapse on Android chrome messing it up. Turns out the jQuery function $(window).height() always reports the viewport height that is before the address bar collapses. To get the correct value, use window.innerHeight instead. You can find more information about URL bar resizing here https://developers.google.com/web/updates/2016/12/url-bar-resizing You can also find people asking similar questions regarding the safari address bar auto-hide, the solutions are similar. Mobile Safari $(window).height() URL bar discrepancy

jQuery's scrollTop() behaving strange on Android browsers including Chrome

1 Answers1