Question

＆＃13;

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;
}

＆＃13;

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

＆＃13;

一旦点击了头部，滚动就不会发生在keydown上。内容div有overflow:overlay，一旦关注它，一切都很好。有没有办法让滚动发生。

我尝试过几个例子：

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

但似乎没有任何效果。

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

代码存在here

Answer 1

单击head div时，关注内容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事件滚动是默认操作并且可以覆盖此行为。

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

1 个答案: