Vertical Scrolling
This page demonstrates dyn-web's JavaScript DHTML Scrolling Div's capabilities for scrolling vertically. The scroll areas below demonstrate vertical scrolling onmouseover and with a graphical scrollbar. Other examples demonstrate horizontal scrolling and glide onclick vertical scrolling of images
The download file contains these and other examples in separate documents to facilitate implementation.
Demonstration
Mouseover Scrolling
This example demonstrates vertical scrolling using mouseover links. Scroll speed is adjustable.
Mouse down on the arrows to see the speed double. Original speed resumes on mouseup.
The documentation provides information for setup. The download file contains examples in individual files for your convenience and ease of implementation.
The code supports the capability to hide or swap images when the end is reached. Further information is provided upon request to licensed users of the code.
Content repeated for your scrolling pleasure :)
This example demonstrates vertical scrolling using mouseover links. Scroll speed is adjustable.
Mouse down on the arrows to see the speed double. Original speed resumes on mouseup.
The documentation provides information for setup. The download file contains examples in individual files for your convenience and ease of implementation.
The code supports the capability to hide or swap images when the end is reached. Further information is provided upon request to licensed users of the code.
Back to the top
Speed Options in Image Maps
This example demonstrates mouseover scrolling using image maps to provide varying speed options. Hover over various portions of the arrows to see this demonstrated.
The download file includes an example that demonstrates both vertical and horizontal scrolling using image maps.
Content repeated for your scrolling pleasure :)
This example demonstrates mouseover scrolling using image maps to provide varying speed options. Hover over various portions of the arrows to see this demonstrated.
The download file includes an example that demonstrates both vertical and horizontal scrolling using image maps.
This example demonstrates mouseover scrolling using image maps to provide varying speed options. Hover over various portions of the arrows to see this demonstrated.
The download file includes an example that demonstrates both vertical and horizontal scrolling using image maps.
Scroll Div with Graphical Scrollbar
This example demonstrates vertical scrolling with a graphical scrollbar. Another example demonstrates with horizontal scrolling.
Try the links on the right to test some of the special features of the code. Read more about them below this scroll area.
Another example demonstrates additional advanced features, including the capability to dynamically update the content of the scroll area and retrieving new content using ajax.
Although you can put virtually anything you like in the div's for scrolling, there are some types of content that would be less appropriate than others or that could cause potential problems.
See the documentation for information about these issues.
Happy scrolling!
Glide to the top
Extra 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. Further information is available in Part Two of the documentation.
Jump to Top/Glide to 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.
The code supports the capability to either hide or swap the scroll control images when the end is reached on either axis. Further information is available in Part Two of the documentation.
More Information
See Documentation for basic instructions as well as more detailed information about advanced features of the code. The download file contains numerous examples to simplify the process of implementation for you. See the list of examples in the right column to see other features demonstrated.
See Licensing Information for use of the code. Please read dyn-web's Terms of Use if you plan to use our code.