document.body, doctype, scroll bar height, clientHeight, offsetHeight, scroll size

document.body and doctype switching

What is the meaning of the various properties of document.body and document.documentElement? What happens in Explorer 6 when you use a doctype that causes compatibility mode? I did some research, but didn't find an overall theoretical model.

I've done some tests on these property pairs

1. clientWidth, clientHeight
2. offsetWidth, offsetHeight
3. scrollWidth, scrollHeight
4. scrollTop, scrollLeft

which may be properties of document.body and/or document.documentElement. I can't find much sense in the test results. An article summarizing the experiment has appeared on Evolt.

View the test pages for yourself, if you like.

• Test page with doctype
• Test page without doctype

Explorer 6 and doctypes

If you use a DOCTYPE that puts Explorer 6 in standards compliant mode, some properties of document.body are reassigned to document.documentElement. For instance, to get the scrollTop, you should do

document.documentElement.scrollTop

Of course, in Explorer 5 the properties still belong to document.body so that you have to separate 6 from 5. How to do this with a proper support detect? (Needless to say, I don't want a browser detect):

if (document.documentElement && document.documentElement.scrollTop)
theTop = document.documentElement.scrollTop;
else if (document.body)
theTop = document.body.scrollTop
else
[Netscape stuff]

Checking if the documentElement exists is not enough, since it exists in all W3C DOM compatible browsers. So we also have to see if it has a property scrollTop. If it has, we're in Explorer 6 and we should read it out. If it hasn't, read out body.scrollTop as usual.

See the sticky menu script for a practical implementation of this support detect.

Another possibility is to use Explorer's proprietary compatMode property and to see if it's not in 'BackCompat' mode (backward compatibility; the old, non-standard interpretation of the code):

if (document.compatMode && document.compatMode != "BackCompat")
theWidth = document.documentElement.clientWidth;
else
theWidth = document.body.clientWidth;

The disadvantage of this method is that it will only work in Explorer 6, not in any other browser that stores the information in document.documentElement. At the moment there is no such browser, but who knows that the future will bring? Therefore I don't use this detect.

Compatibility table

See also the article summarizing the experiment.

Property	document.body						document.documentElement
	IE 5.0 & 6.0 Win nodoc	IE 6.0 Win doc	IE 5 Mac	Mozilla 1.0	Opera 6	IE 5.0 Win	IE 6.0 Win nodoc	IE 6.0 Win doc	IE 5 Mac	Mozilla 1.0
clientHeight	Window height excluding scrollbar	Height of the BODY element	Window height excluding scrollbar	Window height excluding scrollbar	Window height excluding scrollbar (but never less than offsetHeight)	0		Window height excluding scrollbar	undefined	0
clientWidth	Window width excluding scrollbar	Width of the BODY element	Window width excluding scrollbar	Window width excluding scrollbar	Window width excluding scrollbar	0		Window width excluding scrollbar		0
offsetHeight	Window height including scrollbar	Height of the BODY element	Height of the BODY element	Height of the BODY element	Height of the BODY element	Window height including scrollbar		Window height including scrollbar	Height of the HTML element	Height of the HTML element
offsetWidth	Window width including scrollbar	Width of the BODY element	Window width excluding scrollbar	Width of the BODY element	Window width excluding scrollbar	Window width including scrollbar		Window width including scrollbar	Window width excluding scrollbar	Width of the HTML element
Property	document.body						document.documentElement
	IE 5.0 & 6.0 Win nodoc	IE 6.0 Win doc	IE 5 Mac	Mozilla 1.0	Opera 6	IE 5.0 Win	IE 6.0 Win nodoc	IE 6.0 Win doc	IE 5 Mac	Mozilla 1.0
scrollHeight	Height of the HTML element	Height of the BODY element	Window height excluding scrollbar	Height of the HTML element	undefined	Window height including scrollbar		Height of the HTML element	undefined	Height of the HTML element
scrollWidth	Width of the HTML element	Width of the BODY element	Window width excluding scrollbar	Width of the HTML element	undefined	Window width including scrollbar		Width of the HTML element		Width of the HTML element
scrollLeft	Horizontal scrolling offset	0	Horizontal scrolling offset	Horizontal scrolling offset	Not sure	Horizontal scrolling offset	0	Horizontal scrolling offset		0
scrollTop	AVertical scrolling offset	0	Vertical scrolling offset	Vertical scrolling offset	Not sure	Vertical scrolling offset	0	Vertical scrolling offset		0

Note: scrollLeft and scrollTop also work on DIV's with overflow: auto in Explorer 5+ on Windows and Mozilla 1.1

Table of measurements

Measurement	IE 5.0 Win	IE 6.0 Win nodoc	IE 6.0Win doc	IE 5 Mac	Mozilla 1.0	Opera 6
Window height excluding scrollbar	b.clientHeight		dE.clientHeight	b.clientHeight b.scrollHeight	b.clientHeight	b.clientHeight (but it's never less than offsetHeight)
Window width excluding scrollbar	b.clientWidth		dE.clientWidth	b.clientWidth b.offsetWidth dE.offsetWidth b.scrollWidth	b.clientWidth	b.clientWidth b.offsetWidth
Window height including scrollbar	b.offsetHeight dE.offsetHeight dE.scrollHeight		dE.offsetHeight	not available
Window width including scrollbar	b.offsetWidth dE.offsetWidth dE.scrollWidth		dE.offsetWidth	not available
Height of the BODY element	not available		b.clientHeight b.offsetHeight b.scrollHeight	b.offsetHeight	b.offsetHeight	b.offsetHeight
Width of the BODY element	not available		b.clientWidth b.offsetWidth b.scrollWidth	not available	b.offsetWidth	not available
Height of the HTML element	b.scrollHeight		dE.scrollHeight	dE.offsetHeight	dE.offsetHeight b.scrollHeight dE.scrollHeight	not available
Width of the HTML element	b.scrollWidth		dE.scrollWidth	not available	dE.offsetWidth b.scrollWidth dE.scrollWidth	not available
Horizontal scrolling offset	b.scrollLeft dE.scrollLeft	b.scrollLeft	dE.scrollLeft	b.scrollLeft	b.scrollLeft	Probably b.scrollLeft
AVertical scrolling offset	b.scrollTop dE.scrollTop	b.scrollTop	dE.scrollTop	b.scrollTop	b.scrollTop	Probably b.scrollTop

(quirksmode.com)