Question

我实现了一个用于查看日志条目的网页。代码看起来像这样（随机数据）：

＆＃13;

<html>

<body>
  <div style="width: 100%; height: 150px; overflow-y: scroll; overflow-x: hidden; white-space: nowrap;">
    <ul>
      <li>1: Random: 199737: RANDOM: thou  cover bare unless mind office library</li>
      <li>2: Random: 199738: RANDOM: quietly syllable fewer which selection dangerous</li>
      <li>3: Random: 199739: RANDOM: hung  spend wonder care (199739) leg card first</li>
      <li>4: Random: 199740: RANDOM: available circus laid (199740) surrounded pack</li>
      <li>5: Random: 199741: RANDOM: finally green be around (199741) visit headed</li>
      <li>6: Random: 199742: RANDOM: studied until bare  parts busy string modern</li>
      <li>7: Random: 199743: RANDOM: empty garage sitting (199743) fish famous still</li>
      <li>8: Random: 199744: RANDOM: cat kitchen service diameter friendly lying</li>
      <li>9: Random: 199745: RANDOM: even shoulder composition rubber carbon</li>
      <li>10: Random: 199746: RANDOM: about indicate rhythm were beneath expression bit</li>
      <li>11: Random: 199747: RANDOM: future independent clock lying reach slipped</li>
      <li>12: Random: 199748: RANDOM: clothing number scared solar radio forty</li>
      <li>13: Random: 199749: RANDOM: break volume  folks teach</li>
    </ul>
  </div>
</body>

</html>

＆＃13;

现在，如果我点击列表并按下每个键的DOWN，则列表会滚动多行。在Chrome中我看到1-st线，然后是3-rd，然后是6-th等......

我的期望是，UP和DOWN键应滚动完全 1行，而PAGE UP和PAGE DOWN应滚动确切的数字适合<div>的行（当前示例中为150px）。然而，这种情况并非如此。相反，UP，DOWN键滚动2行，PAGE UP，PAGE DOWN滚动约75％的可见区域。

我的问题是为什么会这样，有没有办法以预期的方式做到这一点？

Answer 1

您可以添加使用javascript

更改滚动值的文档侦听器

[CONDITIONS]

来源：How do I prevent scrolling with arrow keys but NOT the mouse?

如何在HTML页面上更改键盘滚动步骤

1 个答案: