Inside Technique : Scrolling Viewports : Custom Scrollbars (IE4)

We provide two techniques for creating your own scrollbars. The first uses the CSS overflow property with a small script to scroll the page. The second technique is a cross-browser solution that requires you to manually create the viewport region. This is necessary to make this work cross-browser as Netscape currently does not support the overflow property.

Our first approach involves setting the overflow property to hidden. This causes the browser to clip the contents to the viewport and to not provide any default mechanism to scroll the page. Next we added two buttons that call a short script for moving the logical top of the document. By moving the logical top of the document up and down, we create the same effect as the scrollbars.

Below demonstrates the custom scrollers (IE4+ Only). Clicking on the down or up links below (holding the mouse button down causes the page to keep scrolling). These links can be changed to an image simply by changing their contents.

Internet Explorer 4.0 only. If the scrolling contents were included, they would be displayed in the flow of the page.

The viewport for the custom scroling region is defined as follows:

<DIV ID=s1 
     STYLE="width: 300; height: 100;
            overflow: hidden; border:1px black solid">
contents
</DIV>

The script and buttons for moving the page up and down is as follows. While we chose to create the up and down buttons out of linksy ou can make any element you want a scroll widget as long it calls the doScrollerIE() function.

<SCRIPT>
var sRepeat=null
function doScrollerIE(dir, src, amount) {
	if (amount==null) amount=10
	// Move the top of the contents up or down
	// in the viewport
	if (dir=="up")
		document.all[src].scrollTop-=amount
	else
		document.all[src].scrollTop+=amount

	// Check if to repeat
	if (sRepeat==null)
		sRepeat = setInterval("doScrollerIE('" + dir + "','" + src + "'," + amount + ")",100)
	return false
}

// Used to end repeating scrolling
window.document.onmouseup = new Function("clearInterval(sRepeat);sRepeat=null")
window.document.ondragstart = new Function("return false")
</SCRIPT>

<P>
  <A ONMOUSEDOWN="return doScrollerIE('down','s1',40)" 
     ONMOUSEOUT="clearInterval(sRepeat)" HREF="#">
    Down
  </A> | 
  <A ONMOUSEDOWN="return doScrollerIE('up','s1',40)" 
     ONMOUSEOUT="clearInterval(sRepeat)" HREF="#">
    Up
  </A>

The scrollTop property represents the top position of the logical contents in relation to the viewport. Setting scrollTop to 0 causes the top of the contents to be displayed. We did not add handling for horizontal scrolling. The horizontal scroll position is handled by the scrollLeft property and works in the same manner as the scrollTop property. If you need to determine the logical size of the contents, there is also a scrollWidth and scrollHeight property.

To scroll the viewport, you use the doScrollerIE() function. This function takes three arguments, a string whether to scroll up or down, the string name of the viewport to scroll, and the number of pixels to scroll. If you choose to add support for horizontal scrolling, the first argument should be extending to include "left" and "right".

This shows you how to create a scrolling viewport in Internet Explorer 4.0 or later. But what about Netscape? Since Netscape does not support the CSS overflow property, we need to do a little more work. For Netscape, to create a scrolling viewport we must use CSS Positioning to define both a viewport and a container for the contents. On the next page we show you how.

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