在键盘上向上/向下箭头自动滚动 [英] Autoscroll on keyboard arrow up/down

问题描述

我想使用键盘按键滚动到ul列表。
经过几次尝试，我得到了这个工作。

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

不幸的是，我面对一个很长的列表的问题。
我想能够通过提供css规则overflow来滚动它们：auto;

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;

键盘输入仍然被正确地评估，但是滚动条isn' t滚动。
有人可以指定如何在需要时通过键盘输入找到自动滚动的解决方案？

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?

我的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>

我的css：

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

.selected{
    background:#ff0000;
}

我设置了一个jsfiddle环境来显示我的代码：

I set up an jsfiddle environment to show my code:

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

推荐答案

此jQuery 。scrollTo（）：插件应该能够帮助你。

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

你可以做的一些例子：

$('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.

这篇关于在键盘上向上/向下箭头自动滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！