SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : SuperScroller Behavior
By Scott Isaacs

Internet Explorer 5.0 behaviors are a great way to enhance the existing behavior of your web page. In this article, we show you how to override the built-in scrollbars without requiring any scripting knowledge using our SuperScroller behavior. In down-level browsers that do not support behaviors, the behavior is ignored and the traditional scrollbars are displayed.

The SuperScroller behavior demonstrates a number of new Internet Explorer 5.0 object model features:

  • Dynamic Expressions - You can define an expression for any attribute. This expression is automatically recalculated by the browser. We use dynamic expressions to position the custom scrollbar widgets.
  • Mouse Capturing - Mouse capture is where all events are routed to a specific element as the mouse is down. Using mouse capture makes it easy to continually scroll a page as the mouse is pressed.
  • Scrollbar Object Model - Internet Explorer 5.0 exposes methods that match the built-in behavior of the scrollbars. We use the scrollbar object model to force our custom scrollbars to scroll the same amount as the built-in up and down arrows.
  • Custom Tags - The custom scrollbar widgets are defined by a very simple set of XML tags. By using these tags, you can customize the scrollbar widgets without writing any script.

Before we show you how each of these features are used, we demonstrate how to define a custom scrollbar using the SuperScroller behavior. Our goal was to allow you to create custom scrollbar widgets without writing any script and without causing conflicts with existing browsers. As you will see, we came up with a fairly simple, non-obtrusive solution.

Page 1:SuperScroller Behavior
Page 2:Using the Behavior
Page 3:Writing the Behavior
Page 4:Demo and Code