Inside Technique : DHTML Scrollbars : Getting Ready

CSS2 defines an overflow property for adding scrollbars to containers. This property is supported by Internet Explorer 4.x and later. By adding a scrollbar to a DIV, and carefully manipulating the DIV's width and height plus the size of the contained contents, you can create both horizontal and vertical scrollbars.

While this sounds simple, it is actually fairly tricky to implement. The height of horizontal and width of vertical scrollbars are defined by the user's system settings. This size also effects how many increments the scrollbar displays because you must substract out the size of the other dimensions scrollbar. For example, the size of my scrollbars are 20 pixels (eg., horizontal scrollbars are 20 pixels wide). Therefore, for me to create a scrollbar that is 200 pixels wide and has 500 steps, I need to create a DIV that is 200 pixels wide to display the scrollbar, but to create 500 steps, the contents in the DIV actually need to be 480 pixels (500 less the 20 pixel width of the vertical scrollbar).

To determine the amount of this space for horizontal scrollbars, we analyze compare the clientWidth to the real width of the DIV. The clientWidth property represents how much space is available for display. The offsetWidth represents the real width of the DIV including the scrollbars. Subtracting the offsetWidth from the clientWidth gives us the correct offset to use. For vertical scrollbars, we are able to ensure a horizontal scrollbar is not included in the calculation and do not need to include any offset.

We do all these calculations once by creating a few DIV"s offscreen. The function getScrollWidth is used to determine the width of the scrollbar:

var arrowWidth = null

function uniqueID(prefix) {
	// Utility function to find an unused ID
	var cnt = 0
	while (document.all[prefix+(++cnt)]!=null);
	return prefix+cnt
}

function getArrowWidth() {
	var tempID = uniqueID("temp")
	var str = "<DIV  ID=\"" + tempID + "\" STYLE=\"position: absolute; top: -500; width: 100;overflow: scroll\"><DIV STYLE=\"width: 500\">&nbsp;</DIV></DIV>"
	if (document.readyState!="complete")
		document.write(str)
	else
		document.body.insertAdjacentHTML("beforeEnd", str)
	var nWidth = (document.all[tempID].offsetWidth - document.all[tempID].clientWidth) 
	arrowWidth = nWidth // cache value 
}

Notice that we check the document's readyState. This enables us to add scrollbars either as the document is constructed or after the document is loaded. While the document is loading, you can only insert contents into the page using the document.write method. After the page is loaded, the document.write method can no longer be used. Instead, you need to use the properties and methods exposed on the individual elements in the page. For this function, we are inserting the DIV's before the end of the BODY element in the document.

With the size of the scrollbars, we can go ahead and create the actual scrollbar. Next we explain how we wrote the createScroll() function and how we get scroll events and properties for free.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.