Chrome on android not resetting window height when address bar hides

Question

I'm not sure if other browsers doing the same, but chrome on android not resetting window height when address bar is hiding.

I have function that is returning true when you have scrolled pretty close to bottom of the page

function isBottom() {
    return document.body.clientHeight - (window.scrollY + window.innerHeight) <= 50;
}

What could go wrong? - I thought.

For inspecting why my function was not working as I thought it has to, I added console log line

function isBottom() {
    console.log(
        document.body.clientHeight - (window.scrollY + window.innerHeight),
        ' | ',
        document.body.clientHeight + ' - ' + (window.scrollY + window.innerHeight),
        ' | ',
        (window.scrollY + window.innerHeight) + ' = ' + window.scrollY + ' + ' + window.innerHeight
    )
    
    return document.body.clientHeight - (window.scrollY + window.innerHeight) <= 50;
}

After that I used this guide to inspect what is happening on my phone.

I will explain more clearly what is the problem I found. You know, when you are scrolling page down your address bar is hiding, and also we know that window innerHeight property is smaller when this address bar is shown. When it is hidden our innerHeight has normal value. BUT, this value is only updated when page stops scrolling and this is the issue.

So, if your scroll have enough momentum to go bottom, have your address bar shown and scrolling down making address bar hide, this line gives me not 0 when I'm a the bottom of the page, but height of this address bar.

document.body.clientHeight - (window.scrollY + window.innerHeight)

I don't know what can I do to solve this problem. May be someone will be able to help?

See Chrome [docs](https://developer.chrome.com/blog/url-bar-resizing/) and this [answer](https://stackoverflow.com/a/70048720/3370431) for ideas. — Eric Mutta, May 31 '22 at 00:12

Mordechai · Answer 1 · 2023-08-02T05:45:04.547

window.innerHeight is not updated, and all associated resize events are not fired until all scrolling has completed. This is intentional, to avoid layout shifts while scrolling.

You could use window.visualViewport.height which is immediately updated even on mobile address bar hide. You could also attach a resize listener

window.visualViewport.addEventListener('resize', () => console.log('height', window.visualViewport.height))

Chrome on android not resetting window height when address bar hides

1 Answers1