页面加载时让<div>自动获焦，实现无需点击即可按键滚动

我刚好碰到过类似的需求，这就给你分享个完美的解决方案——既不用依赖对非输入元素无效的autofocus，也不会在地址栏留下锚点后缀：

核心思路 #

普通<div>默认是不能被聚焦的，我们需要先给它添加可聚焦属性，再通过JavaScript在页面加载完成后主动触发焦点绑定。

具体步骤 #

1. 给目标Div添加tabindex属性 #

这个属性能让Div变成可聚焦元素，推荐用tabindex="-1"，它的好处是：只能通过代码触发聚焦，不会出现在Tab键的导航序列里，不会干扰用户正常的键盘导航流程。

示例HTML：

<div id="scrollable-div" tabindex="-1">
  <!-- 这里放你的滚动内容 -->
</div>

2. 页面加载后调用focus()方法 #

用DOM加载完成的事件触发焦点绑定，确保元素已经渲染完毕：

示例JavaScript：

// 等待DOM完全加载
document.addEventListener('DOMContentLoaded', function() {
  const targetDiv = document.getElementById('scrollable-div');
  // 给Div设置焦点
  targetDiv.focus();
});

效果验证 #

页面加载完成后，这个Div会自动获得焦点，你直接按下方向键（↑/↓）或者空格键就能滚动Div内的内容了，完全和你提到的维基百科主页效果一致，而且地址栏不会出现任何锚点后缀～

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