CODEWITHSUNDEEP
javascriptandroidjqueryscroll
Valentin Baciu
Valentin Baciu

Reputation: 19

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

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...

Upvotes: 1

Views: 1101

Answers (1)

B Wai
B Wai

Reputation: 43

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

Upvotes: 1

Related Questions