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.
document.documentElement is exactly what we want here:
For instance, this button shows the height of your window:
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:
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
Please note: top-level geometry properties may work a little bit differently when there’s no
<!DOCTYPE HTML> in HTML. Odd things are possible.
In modern HTML we should always write
Theoretically, as the root document element is
documentElement.clientWidth/Height, and it encloses all the content, we could measure its full size as
These properties work well for regular elements. But for the whole page these properties do not work as intended. In Chrome/Safari/Opera if there’s no scroll, then
documentElement.scrollHeight may be even less than
documentElement.clientHeight! For regular elements that’s a nonsense.
To have a reliable full window size, we should take the maximum of these properties:
let scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight ); alert('Full document width, with scrolled out part: ' + scrollHeight);
Why so? Better don’t ask. These inconsistencies come from ancient times, not a “smart” logic.
Regular elements have their current scroll state in
What’s with the page? Most browsers provide
documentElement.scrollLeft/Top for the document scroll, but Chrome/Safari/Opera have bugs (like 157855, 106133) and we should use
document.body instead of
Luckily, we don’t have to remember these peculiarities at all, because of the special properties
These properties are read-only.
For instance, if we try to scroll the page from the script in
<head>, it won’t work.
Regular elements can be scrolled by changing
We can do the same for the page:
- For all browsers except Chrome/Safari/Opera: modify
- In Chrome/Safari/Opera: use
It should work, but smells like cross-browser incompatibilities. Not good. Fortunately, there’s a simpler, more universal solution: special methods window.scrollBy(x,y) and window.scrollTo(pageX,pageY).
scrollBy(x,y)scrolls the page relative to its current position. For instance,
scrollBy(0,10)scrolls the page
The button below demonstrates this:
scrollTo(pageX,pageY)scrolls the page relative to the document top-left corner. It’s like setting
To scroll to the very beginning, we can use
These methods work for all browsers the same way.
For completeness, let’s cover one more method: elem.scrollIntoView(top).
The call to
elem.scrollIntoView(top) scrolls the page to make
elem visible. It has one argument:
top=true(that’s the default), then the page will be scrolled to make
elemappear on the top of the window. The upper edge of the element is aligned with the window top.
top=false, then the page scrolls to make
elemappear at the bottom. The bottom edge of the element is aligned with the window bottom.
The button below scrolls the page to make itself show at the window top:
And this button scrolls the page to show it at the bottom:
Sometimes we need to make the document “unscrollable”. For instance, when we need to cover it with a large message requiring immediate attention, and we want the visitor to interact with that message, not with the document.
To make the document unscrollable, its enough to set
document.body.style.overflow = "hidden". The page will freeze on its current scroll.
The first button freezes the scroll, the second one resumes it.
We can use the same technique to “freeze” the scroll for other elements, not just for
The drawback of the method is that the scrollbar disappears. If it occupied some space, then that space is now free, and the content “jumps” to fill it.
That looks a bit odd, but can be worked around if we compare
clientWidth before and after the freeze, and if it increased (the scrollbar disappeared) then add
document.body in place of the scrollbar, to keep the content width same.
Width/height of the visible part of the document (content area width/height):
Width/height of the whole document, with the scrolled out part:
let scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight );
Read the current scroll:
Change the current scroll:
window.scrollTo(pageX,pageY)– absolute coordinates,
window.scrollBy(x,y)– scroll relative the current place,
elem.scrollIntoView(top)– scroll to make
elemvisible (align with the top/bottom of the window).