HTML中滚动容器div加载时获取focus以支持按键滚动的实现方法

要让div能通过PageUp/PageDown控制滚动，核心是让它具备获得焦点的能力（默认div不支持焦点），具体实现分两步：

• 给目标div添加tabindex属性，使其成为可聚焦元素。推荐设为0（符合Tab键导航逻辑）或-1（仅允许JS强制聚焦，不参与Tab导航）：

<div id="scrollContainer" tabindex="0" style="height: 300px; overflow-y: auto;">
  <!-- 你的滚动内容 -->
</div>

• 页面加载完成后，通过JavaScript调用focus()方法让div聚焦：

document.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('scrollContainer');
  container.focus();
});

如果不想看到div聚焦时的默认边框，可通过CSS移除：

#scrollContainer:focus {
  outline: none;
}

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