javascript - 向上/向下键盘箭头自动滚动

Question

我希望能够使用我的键盘键在 ul 列表中滚动。经过几次尝试后，我成功了。

不幸的是，我遇到了一个很长的列表的问题。我希望能够通过提供 css 规则 overflow:auto; 来滚动浏览它们；

键盘输入仍然被正确评估，但滚动条没有滚动。有人可以指定我如何在需要时使用键盘输入找到自动滚动的解决方案吗？

我的 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 环境来显示我的代码:

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

Answer 1

这个 jQuery .scrollTo(): plug-in应该能帮到你。

您可以做什么的一些示例:

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

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

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

最后一个示例可能就是您所需要的。