javascript

Scroll Dimensions
Chapter 11: DOM Levels 2 and 3
The last set of dimensions is scroll dimensions , which provide information about an element whose
content is scrolling. Some elements, such as the < html > element, scroll automatically without needing
any additional code, whereas other elements can be made to scroll by using the CSS overflow property.
The four scroll dimension properties are as follows:
❑
❑
❑
❑
scrollHeight — The total height of the content if there were no scrollbars present.
scrollLeft — The number of pixels that are hidden to the left of the content area. This
property can be set to change the scroll position of the element.
scrollTop — The number of pixels that are hidden in the top of the content area. This property
can be set to change the scroll position of the element.
scrollWidth — The total width of the content if there were no scrollbars present.
Figure 11 - 3 illustrates these properties.
scrollWidth
hidden content
scrollTop
scrollHeight
border
content padding
Figure 11-3
scrollLeft
The scrollWidth and scrollHeight properties are useful for determining the actual dimensions
of the content in a given element. For example, the < html > element is considered the element that
scrolls the viewport in a web browser (the < body > element in IE versions prior to 6 running in
quirks mode). Therefore, the height of an entire page that has a vertical scrollbar is document
.documentElement.scrollHeight .
339