如何查找并控制接收键盘滚动事件的DOM元素

1. 控制该逻辑的底层机制 #

浏览器内部存在独立于DOM聚焦体系的滚动目标标记逻辑：当用户点击可滚动元素时，浏览器会在内部将其标记为当前键盘滚动事件的响应目标，该状态默认不会同步到document.activeElement，也不属于标准DOM暴露的公共状态。
普通可滚动div默认不具备可聚焦属性，因此直接调用element.focus()没有效果，激活状态不会变更，document.activeElement始终指向body。

2. 浏览器对该功能的暴露情况 #

目前W3C标准中没有定义查询/修改这个内部滚动目标的原生API，浏览器没有直接对外暴露该状态的读写接口，无法直接通过JS获取浏览器内部标记的当前滚动激活元素。

3. tabindex的作用与解决方案 #

是的，要通过JS控制该状态、将指定可滚动元素设置为滚动激活目标，需要给元素添加tabindex属性：

• 给目标可滚动元素设置tabindex="-1"，即可让元素支持通过JS调用focus()方法获得焦点，同时不会被Tab键遍历进入页面焦点序列
• 调用element.focus()后，document.activeElement会指向该元素，此时方向键、pageup/pagedown等按键会控制该元素滚动，完全符合激活效果

实操代码示例 #

给可滚动元素添加属性：

<div id="e1" style="overflow: auto;height: 200px;" tabindex="-1">
  <!-- 长内容 -->
</div>

主动激活该元素的代码：

document.getElementById('e1').focus()

如果需要自行维护当前滚动激活元素，可通过全局点击事件监听实现：

let activeScrollElement = document.body
document.addEventListener('click', e => {
  // 判断点击元素是否为可滚动元素
  const isScrollable = e.target.scrollHeight > e.target.clientHeight || e.target.scrollWidth > e.target.clientWidth
  if (isScrollable) {
    activeScrollElement = e.target
  }
})

内容的提问来源于stack exchange，提问作者taw