Get Android Chrome Browser Address bar height in JS

Question

How do I get the height of the address bar in JavaScript in the Chrome browser for Android (marked by red rectangle in left picture)? I need to know that as it disappears while scrolling down and I need to react to that because the viewport height is different then.

One solution I already figured out:

1. Get viewport height at initial state: var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

2. Get viewport height when the address bar has disappeared

3. Compute difference between both values

Problem is that you have to be in the second state to know that.

Answer 1

Because 100vh will be larger than the visible height when the URL bar is shown. According to this.

You can calculate the height of the URL bar by creating a 0-width element with 100vh height.

<div id="control-height"></div>

#control-height {
    height: 100vh;
    width: 0;
    position: absolute;
}

Then using javascript compare window.innerHeight with the height of this element.

const actualHeight = window.innerHeight;
const elementHeight = document.getElementById('control-height').clientHeight;

const barHeight = elementHeight - actualHeight;