Autoscroll on keyboard arrow up/down

Question

I want to be able to scroll trough an ul list with my keyboard keys. After a couple of attempts i got this working.

unfortunately i face a problem with very long lists. I want to be able to scroll trough them by providing the css rule overflow:auto;

The keyboard input is still evaluated correctly, but the scrollbar isn't scrolling along. Could someone specify how I can find a solution to autoscroll when needed with the keyboard input?

My html:

<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Inch                            
</a>

<ul class="dropdown-menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
</ul>
</div>

My css:

ul{
    list-style-type:none;
    max-height:110px;
    overflow:auto;
    text-align:center;
}

.selected{
    background:#ff0000;
}

I set up an jsfiddle environment to show my code:

http://jsfiddle.net/Ugkxk/6/

score -1 · Accepted Answer · answered Mar 23 '13 at 17:30

-1

This jQuery .scrollTo(): plug-in should be able to help you.

Some examples of what you can do:

$('body').scrollTo('#target'); // Scroll Screen to Target Element

$('body').scrollTo(500); // Scroll Screen 500px Down

$('#scrollable').scrollTo(100); // Scroll Individual Element 100px Down

The last example is probably what you need.

answered Mar 23 '13 at 17:30

bukka

4,973
3
19
21

I implemented the first example, which worked out pretty well. My result can be found at: http://jsfiddle.net/Ugkxk/9/ – Menno van leeuwen Mar 24 '13 at 11:02
FYI: I've just checked this fiddle in Google Chrome and Firefox and it is unusable if you leave the mouse cursor hovering over the list. Also scrolling off of either the top or bottom does not select the last/first item. – nevf Mar 26 '13 at 20:21
thanks for the info nevf! I made another question: http://stackoverflow.com/questions/15700834/make-ul-list-work-like-select-input covering the mouse problem, and will look into the end/begin of list scrolling. – Menno van leeuwen Mar 29 '13 at 12:11

Autoscroll on keyboard arrow up/down

1 Answers1

Linked