Scrolling Div Content with Graphical Scrollbars

DYN-WEB's scrolling code (formerly called Scrolling Layers) has been around for several years. The 2008 version of the code has been streamlined and new features have been added, such as mousewheel support, unobtrusive event handling, accessibility features, and dynamic update capability.

See the list of features below, demonstrated by the examples listed in the right column and in the download file.

Code Features

The scrolling div's code supports the following features:

  • Scrolling onmouseover, onmousedown, onmousewheel, and/or with a gliding motion onclick.
  • Scrolling vertically or horizontally
  • Scrollbars, which can be set up using the graphics of your choice.
  • Scrolling multiple content areas in a document.
  • Swapping new content into the scroll areas, including updating via ajax.
  • Absolute or relative positioning of the scroll areas, in tables or CSS layouts.
  • Glide-scroll onclick, by a specified distance or to a specified location.
  • Hide scrollbars or scroll links when content is insufficient to necessitate scrolling.
  • Scroll to elements with specific id's in the content area.
  • Accessibility features ensuring content is available to incapable browsers or those with JavaScript turned off and device independent scrolling.
  • Unobtrusive event handling
  • Provide speed options for mouseover scrolling using image maps.
  • Double the speed of mouseover scrolling on mousedown of scroll links.

More About the Code

The code supports Internet Explorer 5.5+, Firefox, Opera, Safari, and most likely, any other relatively up-to-date browser.

The scrolling animation is time-based, eliminating the problem of different scroll speeds on different browsers, platforms and operating systems. Smoothness of the animation varies across browsers and platforms, but generally, the time-based algorithms result in smoother motion than frame-based ones.

See Documentation for basic instructions as well as more detailed information about advanced features of the code. The download file contains numerous examples to assist you in the process of implementation to suit your purposes.

See Licensing Information for use of the code. Please read dyn-web's Terms of Use if you plan to use our code.

Back to top