skip to main |
skip to sidebar
If you enjoyed this post, make sure you
Test using arrow keys to scroll a div element
You can scroll this div element by placing the mouse over it, clicking, and using the up and down arrow keys. This element does not have to be a div, it just is for this example.
For this example to work properly, each element in the div (this example using paragraph elements, but anything will work) must have an ID attribute associated with it where the ID attribute follows a pattern with an increasing number appended to the end.
This paragraph has no ID attribute. Things still work, but the scrolling will skip this paragraph. That may not matter depending on your content and the size of the div being displayed. In this example, it is important that the numeric sequence not skip a value since it stops once it no longer finds an element. This need not be the case though, you could vary this behavior to suit your needs.
There are a lot of other ways that this example could be done. This is just one of the many was in which it can be made to work. You don't have to use a div, the event does not need to be just on the div, and you can use any type of block elements within the div to provide the scrolling.
- I have now switched the elements in the div
- and it still works
- so long as the ID values maintain the same form.
- Note that since this elements are not as "tall"
- the scrolls take smaller steps
- when going through these elements.
Mix and match as you wish
If you wanted to get really fancy, you could write a script to parse the DOM inside the target scroll element, and you could then scroll through the elements automatcially so that ID values are no longer needed. This may or may not result in the behavior you want based on the nature of your content.
Click on the scroll area above and then use the up and down arrow keys to
scroll.
News tickers and Widgets
Blogger Templates
Categories