Scrolling Div Content
DYN-WEB's Scrolling Divs code is a long-standing favorite, providing stable cross-browser support since the days of version 4 browsers. Customer requests inspire an ever-increasing collection of demos and add-ons. Basic easy-to-follow examples as well as more advanced demos are included in the download file (version date: November 13, 2011).
October 2011 Update: The code now supports touch devices (ipad, iphone, android) and includes keyboard scrolling. Other advanced features include mousewheel support, unobtrusive event handling, accessibility features, and dynamic update capability. The code also supports glide onclick scrolling to targeted elements in the scroll area.
Code Features
The Scrolling Divs code supports the following features, most of which are demonstrated in the examples[1]:
- Scroll onmouseover, onmousedown, onmousewheel, and/or glide onclick. Touch devices and keyboard scrolling are also supported.
- Scroll vertically and/or horizontally.
- Scrollbars can be set up using the styles and graphics of your choice.
- Scroll multiple content areas in a document.
- Swap new content into scroll areas, replacing it with content in previously hidden divs on the page or retrieve from the server using ajax.
- Dynamic update capabilities. Whether you want to toggle display of elements within scroll areas, add or remove content, modify using ajax or other means, the code can accommodate these changes.
- Absolute or relative positioning of the scroll areas, in tables or CSS layouts.
- Capability for fluid scroll area dimensions, i.e., percentage width and height of scroll areas.
- Hide scrollbars or scroll links when content is insufficient to necessitate scrolling.
- Scroll to elements with specific ids in the content area, onclick or onload.
- Automatic code correction for native div onscroll.
- 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 onmousedown of scroll links.
Additional features that can be made available using more advanced features of the code are listed in Part Two of the documentation.
More About the Code
The code supports Internet Explorer 6+, Firefox, Opera, Safari, Chrome, iPhone, iPad, and should also support 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.[2]
More Information
See Documentation for basic instructions as well as more detailed information about advanced features of the code. The download file contains several basic example documents to assist you in implementing the code to suit your purposes. Additional examples are provided to licensed users.
See Licensing Information for use of the code. Please read dyn-web's Terms of Use if you plan to use our code.