用键盘控制滚动 DIV

Question

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

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

我正在查看以下命令：doScroll()、scrollTo() 或 scroll()

这些都可以吗，或者我可以做些什么来纠正滚动条的行为？

Answer 1

将 tabindex 的 html 属性设置为 div 和 max-height + overflow css 属性将允许 div 可以使用键盘进行选项卡和滚动。并不是说它比 Js 解决方案更好——只是提供了一个不需要 Js 的替代解决方案。

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

.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>

Answer 2

也许您可以在箭头键上输入event.preventDefault()。