Geek Answers Handbook

Scroll arrow div

This is similar to SO: how to move a div using the arrow keys , so perhaps the answer is quite clear and informed “no”:

Can I make the overflow div a “default scroll target” that responds to the up / down / down-down / space arrow in the same way as an overflow document (i.e. scrolls the contents)? There is no scroll bar on the page itself (a simple example below). In particular, can this be achieved without explicit tracking of key events (neither directly, nor using the JS library)?

<html> <body> <div id="contentcontainer" style="height:200px;width:200px;overflow:scroll"> <div id="innercontent" style="height:2000px;">foo</div> </div> </body> </html>

Edit: Of course, this works after clicking on the div. Basically, I want this not to be ...

+7
source share
2 answers

For the html element to be oriented, it must be accessible using the Tab key. This means that you can call .focus() by reference or input. In addition, body elements are always customizable.

You need to make your div accessible with the Tab key. You can accomplish this by setting the tabindex property on it. If you really do not want people to be able to insert a tab in this div, you can set tabindex to -1, which will not allow people to actually tab, but otherwise will set the element up for tabs and focus.

Source: http://help.dottoro.com/ljpkdpxb.php

+9
source

Browsers usually have this behavior built-in,

To use the arrow keys to scroll down your div, you must have an element inside the focused one.

Search http://api.jquery.com/focus/

-one
source

More articles:


All Articles