Demonstrating Scrolling Divs

About Vertical Scrolling

As you can see from the above demonstration of vertical scrolling, mouseover, mousedown and mousewheel scrolling are supported. Image maps can be used to provide control speed options.

The optional custom scrollbar can include mouseover or mousedown scroll arrows at top and bottom. You can click on the track or drag the bar to scroll. The scroll bars can be designed using styles and graphics of your choice. The code also supports use of a horizontal scrollbar.

The images example demonstrates glide onclick vertical scrolling.

About Horizontal Scrolling

Horizontal scrolling is especially well suited for images. For larger images glide onclick scrolling is a good choice. The second scroll area above demonstrates this method as does another demo.

You can also scroll text horizontally. Part Two of the documentation includes information for setting up horizontal scrolling.

About Scrolling Images

Images can be scrolled both horizontally and vertically using the same methods as demonstrated in the other examples, i.e., mouseover, mousedown and scrollbars. Scrollbars can even be provided for both axes on the same scroll area.

Glide onclick scrolling is a especially well suited for images, whereas mouseover or mousedown scrolling of large images tends to be less smooth.

Horizontal glide-onclick scrolling is also supported.

The documentation provides information about setting up the links.

Dynamic Update

Swap Content. Click the "Swap Content" link above to see new content displayed in the scroll area. It is another div, originally hidden, within the scroll area. An unlimited number of hidden divs can be nested within scroll areas for the purpose of swapping content.

The "Toggle Display" links loads another div. It further demonstrates the ability of the code to respond to changing dimensions of content within a div when display is toggled between none and block on elements within the scroll area.

Refreshing Values. Click the "Add Content" link above and you will notice a slight adjustment in the size and position of the scrollbar. The code includes methods that make it easy to access or update information about the scroll area. These methods would be helpful if your scroll area contained elements whose display was to be toggled by the viewer for example, or if content is dynamically added to or deleted from the scroll area. More information and possible uses of these and other advanced features of the code are available in Part Two of the documentation.

Retrieving Content via Ajax. Click the "Get Content" link above to observe the scroll code's support for content obtained from the server using ajax. Whether the content of the scroll area is replaced or updated using Ajax or any other dynamic means, the code has the capability of refreshing values for scrolling the new or amended content.

Hidden Iframe for Scrolling External Content. Another technique for updating scroll areas makes use of a hidden iframe, as described in the Iframes Tutorial. More information about using the scrolling code with a hidden iframe is available upon request to licensed users of the code.

Additional Features

In addition to the usual scroll controls and scrollbar, the code supports other ways to scroll.

Scroll to Element with ID. You can instruct the code to jump or glide to an element with a specified ID. Click the "Scroll to ID" link above to test. If you set up links to make use of named anchors inside the scrolling div's, this will throw off the scroll calculations. So the scrollToId functionality was added as a substitute.

In addition to scrolling to a specific location onclick, the code could scroll to a specified position or element when the page loads.

Jump or Glide to Top or Bottom. If you have used the "Scroll to ID" link to observe that feature, you will likely notice a back to top link at the bottom of the scroll area. Jump or glide to top or bottom links can be placed both within and outside of the scroll area. The documentation provides information about setting up these controls.

Scroll Onload. The code can scroll onload, to a specific position or element, to restore scroll position from a previous page, or automatically for continuous motion.

The code can use query string data to load a specific content div in the scroll area, or to scroll to a particular element when the page loads. The location in a scroll area can be retained from page to page via cookies.

Auto-Hide Scroll Controls. The scrollbar or other scroll controls can be hidden if you have set up the code but scrolling is not needed. The scroll controls can appear or disappear depending upon whether they are needed for scrolling.

Click the "Auto-Hide Controls" link to observe that the scrollbar and arrows are hidden since the content in the newly loaded div is insufficient to require scrolling. Click the "Restore Original" link to see the first div restored along with the now needed scrollbars.

The code also supports the capability to either hide or swap the scroll arrows when the end is reached on either axis.