Window sizes and scrolling
From the DOM point of view, the root document element is
document.documentElement. That element corresponds to
<html> and has geometry properties described in the previous chapter. For some cases we can use it, but there are additional methods and peculiarities important enough to consider.
Width/height of the window
document.documentElement is exactly what we want here:
For instance, this button shows the height of your window: <button onclick="alert(document.documentElement.clientHeight)">alert(document.documentElement.clientHeight)</button>
Browsers also support properties `window.innerWidth/innerHeight`. They look like what we want. So what's the difference?
If there's a scrollbar occupying some space,
clientWidth/clientHeight provide the width/height inside it. In other words, they return width/height of the visible part of the document, available for the content.
window.innerWidth/innerHeight ignore the scrollbar.
If there's a scrollbar, and it occupies some space, then these two lines show different values:
alert( window.innerWidth ); // full window width alert( document.documentElement.clientWidth ); // window width minus the scrollbar
In most cases we need the available window width: to draw or position something. That is: inside scrollbars if there are any. So we should use