如何确定页面中接收键盘滚动事件的滚动元素？

这个问题确实挺有意思——浏览器对这种“滚动焦点”的处理和常规的:focus伪类是分开的，因为默认情况下像<div>这类元素不属于可聚焦元素（除非设置了tabindex），所以点击它们不会触发:focus状态，但浏览器会在内部记录最后被交互的可滚动元素，让它响应键盘箭头的滚动。

下面分享几种靠谱的方法来找出这个元素：

方法一：手动追踪最后点击的可滚动元素 #

这是最直接的方案——我们给所有可滚动元素绑定mousedown事件，每次点击时记录下当前元素，这个记录的元素就是会响应键盘滚动的那个。

// 全局变量保存最后点击的可滚动元素
let lastActiveScrollElement = null;

// 选择页面所有可滚动元素（根据你的实际情况调整选择器）
const scrollableElements = document.querySelectorAll('div[style*="overflow-scroll"], .scrollable');

scrollableElements.forEach(el => {
  el.addEventListener('mousedown', () => {
    lastActiveScrollElement = el;
  });
});

// 之后需要获取时，直接访问这个变量即可
console.log('当前响应键盘滚动的元素:', lastActiveScrollElement);

方法二：让元素可聚焦，利用document.activeElement #

如果给可滚动元素添加tabindex="-1"，它就会变成可聚焦元素（但不会出现在tab导航序列里），此时点击它会触发:focus状态，我们可以直接通过document.activeElement获取到它。

第一步：修改HTML #

<!-- 给滚动div添加tabindex="-1" -->
<div class="scrollable" tabindex="-1">...</div>

第二步：JS获取 #

// 直接获取当前聚焦的元素，也就是响应键盘滚动的那个
console.log('当前响应键盘滚动的元素:', document.activeElement);

注意：如果点击页面其他不可聚焦区域（比如body），document.activeElement会变回<body>，此时箭头键会滚动页面视口。

方法三：监听滚动事件，事后判断 #

如果需要在用户按下箭头键后才确定哪个元素在滚动，可以监听所有可滚动元素的scroll事件，记录触发滚动的元素：

let currentScrollingElement = null;

document.querySelectorAll('.scrollable').forEach(el => {
  el.addEventListener('scroll', () => {
    currentScrollingElement = el;
  });
});

// 监听键盘箭头键，滚动后输出目标元素
document.addEventListener('keydown', (e) => {
  const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
  if (arrowKeys.includes(e.key)) {
    // 用setTimeout确保滚动事件已经触发
    setTimeout(() => {
      console.log('刚才响应滚动的元素:', currentScrollingElement);
    }, 0);
  }
});

补充说明 #

为什么这类元素不会触发:focus？因为浏览器的滚动焦点和DOM的聚焦状态是两个独立的机制：

• 聚焦状态（:focus）针对的是可交互元素（表单、链接、带tabindex的元素等），用于处理键盘输入、焦点样式等。
• 滚动焦点是浏览器内部的追踪机制，专门用来确定键盘箭头键应该控制哪个元素的滚动，不需要元素处于聚焦状态。

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