Develop Reference

How would I go about calculating the window toolbar area height?

So I'm trying to get the height of the top toolbar area as shown in the image. I'm aware of window.outerHeight - window.innerHeight but that also includes the bottom status bar area, giving me an innacurate number.
How would I go about calculating just the top section height?
Any help is appreciated.

So I figured out a hacky way to do it. You have to trigger a pointerEvent and get the screenY and clientY of the mouse position. Subtract the clientY position from the screenY position. This will then give you the top viewport screenY position. Then you subtract the window.screenY from the top viewport screenY position and this will give you the tab\toolbar\bookmark height.
When testing the code snippet, use the JSFiddle link below to run it in a full view. Running it on here will return an inaccurate result.
https://jsfiddle.net/Pending/y7jmf8r5/show
document.querySelector('button').addEventListener('pointerup', (e) => {
let toolbarHInaccurate = window.outerHeight - window.innerHeight;
let toolbarH = e.screenY - e.clientY - window.screenY;
console.log('Toolbar Height Innacurate:', toolbarHInaccurate + 'px');
console.log('Toolbar Height Actual:', toolbarH + 'px');
})
<button>Get Toolbar Height</button>
Measured, actual pixels: 114px
Result from toolbarH in code snippet: 114px
I'm using Windows 10 and window.outerHeight - window.innerHeight returned 120px which is inaccurate, but as stated by xyz, when he used that, it was accurate on his mac.

Get the browser viewport width and height no matter the size of the contents and without sizing to 100%?

Is there a way to get the width and height of the page viewport NOT the contents of a page without setting the body width and height to 100%?
The answers I've found require the html and body elements to be set to 100% width and 100% height.
I already have content on the page that sometimes extends beyond the viewport size. I can't switch the body to 100% and then check the values and then revert back.
In my opinion there should be a property that is simply:
document.body.viewportWidth;
document.body.viewportHeight;
That update on window resize and exclude the chrome.
There are related questions here:
HTML5 Canvas 100% Width Height of Viewport?
Update:
I've been using this:
var availableWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var availableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
It might be that the viewport values are correct but the element itself is growing or shrinking.
I can't find the document.documentElement.clientWidth or document.documentElement.clientHeight in the documentElement docs though.
Update 2:
It looks like it might be an error on my part. I noticed in the logs that occasionally the element has no computed width or height possibly because it hasn't been added to the page yet.
var elementWidth = parseFloat(getComputedStyle(element, "style").width);
var elementHeight = parseFloat(getComputedStyle(element, "style").height);
I think the code I'm already using above is correct.
Update 3:
I found this page on getting the viewport size.

I may not understand your question correctly, but if you're looking for the height and width of the browser window, you could use window.innerHeight and window.innerWidth.
Here is some more information on the window height and width that could be useful.

Does window.innerWidth and window.innerHeight work for you?

Does this help?
document.documentElement.clientWidth
document.documentElement.clientHeight

How to know whether a browser is displaying scrollbar is present or not in reactjs?

I am working on react project. when we make the screen size decrease from large to tiny, a scroll bar is appearing in the browser and as a result my testcases are failing.I wanted to know is there any way we can find whether a scroll bar is displayed in the browser for all types of screen sizes. Also is there any way to get the size of the scroll bar being displayed in the browser?

You can compare the height of your content with the height of the window.
So if (document.body.offsetHeight > window.innerHeight) then the scrollbar would be visible.
UPD:
Regarding scrollbar's sizes. Its width is just a difference between window.innerWidth and document.body.offsetWidth, and its height is equal to window.innerHeight.
So summing up:
let scrollbarSize = {
heigth: window.innerHeight,
width: window.innerWidth - document.body.offsetWidth
}

I would have preferred a comment but I do not have access to that yet.
I am assuming you are talking about height here if not please apply the same solutionwhere appropriate.
To know whether your browser is displaying the vertical scrollbar. Compare the height of the document and the screen height.
Method for the calculation of document height would usually vary across browsers in this case. Use something like this:
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
To calculate your window height use:
const windowHeight = documentElement.clientHeight
If your scrollHeight is greater than the windowHeight then you can be most certain that the vertical scrollbar is present.
Therefore it would be easy to detect

In this sandbox I have tested two posible solutions. First approach (ScrollableComponent and hook useIsScrollable) is based on trying to scroll with element. If it does something then you know that it has scrollbar. The second aproach is based on measuring (ScrollableComponentA and hook useIsScrollableA). Measure wrapper element and inner element and compare its height and width.

How can I get the browser scrollbar height in javascript

How can I get the browser scrollbar height? Does JS have a built-in function for this case?
Somebody please help me out of this.

There isn't a built-in method for this. However, the scrollbar's height is supposed to give an indication of how much of the available content fits within the available viewport. Going by that, we can determine it like:
var sbHeight = window.innerHeight * (window.innerHeight / document.body.offsetHeight);
Where window.innerHeight / document.body.offsetHeight is the percentage of content visible currently. We multiple that with the available viewport height to get the approximate scrollbar height.
Note: Different browsers may add/reduce some pixels to/from the scrolbar height.

'window.pageYOffset'
returns the current height of the scrollbar concerning the full height of the document.
A simple example of usage is like
alert('Current scroll from the top: ' + window.pageYOffset)

Does this help?
this.document.body.scrollHeight

jQuery(document).width() doesn't include width outside of viewable area

jQuery(document).width() doesn't include the total width (viewable + outside of viewable when there's a horizontal bar). It equals jQuery(window).width(). I thought jQuery(window).width() is the viewable area width and jQuery(document).width() is the total width.
How do I get the total width or how do I get the width of the area outside of the viewable area using jQuery?

To get the width of the "invisible" portion, simply subtract the total document width from the visible window width:
jQuery(document).width() - jQuery(window).width()
jsFiddle example
Like you write, $(document).width() is the total width, and $(window).width() is the width that is currently visible.
Tested in the latest Chrome, Firefox, Internet Explorer, and Safari.

I don't know if there's a jQuery equivalent, but
document.getElementsByTagName('body')[0].offsetWidth
should give the correct width of the page, regardless of window size.

It's my mistake. I was displaying the width and then was code somewhere after that that was adjusting the width of some elements, which caused the document to be wider.

I think this codes are useful as well:
self.innerWidth && (document.documentElement && document.documentElement.clientWidth) && document.body.clientWidth;