javascript - 当向下箭头键的 KeyBoardEvent keydown 发生时，滚动不起作用

Question

body {
  padding: 0px;
  margin: 0px;
}

#head {
  background: red;
  height: 30px;
  tab
}

#content {
  position: absolute;
  top: 30px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  font-size: 60px;
  background: green;
  overflow: overlay;
}

<div id='container'>
<div id='head'>Header</div>
  <div id='content'>
    <pre>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
    </pre>
  </div>
</div>

一旦头部被点击，滚动就不会在按键时发生。内容 div 有 overflow:overlay，一旦焦点在上面，一切都很好。有没有办法让滚动发生。

我试过几个例子:

• 在内容 div 上的 Window keydown 调度滚动事件
• 专注于内容 div

但似乎没有任何效果。

另一个问题是 keydown 的默认操作是滚动，我们可以覆盖它吗？

代码存在here

Answer 1

点击 head div 时聚焦于 content div。注意:焦点仅在内容 div 具有属性 tabindex 时才有效

<div id='container'>
<div id='head'>Header</div>
  <div tabindex='1' id='content'>
    <pre>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
    </pre>
  </div>
</div>
<script>
document.getElementById('head').addEventListener('click', function() {
  const content = document.getElementById('content');
  content.focus();
});
</script>

更新码是here

虽然我仍然不清楚它在哪里决定 keydown 事件滚动是默认操作，并且可以覆盖此行为。