Question

我有一个div，其中包含一个包含许多行的表。滚动条显示正确，并在使用鼠标时正常工作。然而，为了使键盘驱动我已经使div具有焦点然后能够使用箭头键（通过onKeyPress事件我能够在div上下移动。

除了一点点怪癖之外......当div获得焦点并按下向下箭头键时，滚动条也向下移动（有效地隐藏了我现在正在关注的行）。所以我的问题是，有什么方法可以避免这种情况发生吗？

我正在查看以下命令：doScroll（），或scrollTo（）或scroll（）

是否有任何工作或者我还能做些什么来纠正滚动条的行为？

Answer 1

也许你可以在箭头键上做event.preventDefault()。

Answer 2

将tabindex的html属性设置为div和max-height +溢出css属性将使div可在键盘上切换并滚动。并不是说它比Js解决方案更好-仅提供不需要Js的替代解决方案。

运行代码片段以查看示例。由于堆栈溢出的布局方式，在单击运行后，您需要单击代码输出框内的任何位置，然后单击选项卡（然后使用箭头滚动）。注意：这不是因为我的代码，而是因为堆栈溢出布局其页面的方式。

.wrapper {
  max-height: 50px;
  overflow: auto;
}

<div tabindex="0" class="wrapper">
  <ul>
    <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>
  </ul>
</div>

使用键盘控制滚动DIV

2 个答案: