Question

当在一个页面上有多个带滚动条的元素时（可能通过设置CSS overflow-scroll），键盘上的箭头键总是只滚动一个区域（这是一件好事）。似乎总是带有滚动条的最后一个元素，我用鼠标点击它来识别关键事件并滚动（example on Codepen）。

有没有办法找出哪个元素（上例中的div元素）有键盘＆＃34;焦点＆＃34; （引用因为它似乎没有得到焦点伪类，见上面的例子）？

Answer 1

您可以将tabindex添加到外部或滚动元素，然后使用document.activeElement

window.addEventListener('keydown', e => {
  let a = document.activeElement;
  console.log(a);
})

.container {
  display: flex;
}
.outer-left {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
}

.inner-left {
  height: 500px;
  background-color: red;
}

.outer-right {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
}

.inner-right {
  height: 500px;
  background-color: blue;
}

<div class="container">
  <div class="outer-left" tabindex="1">
    <div class="inner-left">
    </div>
  </div>
  <div class="outer-right" tabindex="2">
    <div class="inner-right">
    </div>
  </div>
</div>

Answer 2

您可以将tabindex="0"添加到div。

https://codepen.io/gezzasa/pen/QrOdqX

找出哪个滚动元素具有键盘焦点

2 个答案: