方向键滚不动？带你搞懂 tabindex 的工作原理

作者：刘锦泉

一、客户的反馈

小刘是公司的一名前端工程师。某天，他在业务反馈群里看到客户抱怨：

"xx 页面用方向键居然滚不动了！"

客户还补充：

"前两天还好好的，今天突然就不行了。鼠标滚轮正常、拖动滚动条正常，偏偏就是键盘方向键没反应。"

小刘立刻响应，同时心里纳闷：
"奇怪，方向键滚动是浏览器的默认行为啊，怎么会突然坏掉？难道有人动过它？"

为了弄清楚，他决定亲自重现场景。

二、初步排查

接到反馈后，小刘首先排除了兼容性问题。

打开页面一看，果然和客户描述一致：滚轮、拖动条正常，方向键没反应 。

他皱起眉头：

"这可不是常见的问题啊......"

小刘随即翻看了发布记录，本以为是最近上线的功能导致，结果发现近期并没有相关发布。

"没发版，怎么会突然坏掉呢？"

为了进一步确认，他又在本地拉起项目。结果方向键一切正常。

线上不行，本地正常 ------情况更加诡异了。

他开始怀疑：问题不在业务逻辑，而是和 运行环境 有关。

很快，他联想到团队最近刚上线的 微前端多 Tab 缓存架构。

"会不会是多 Tab 把键盘事件或者焦点劫持了？"

带着疑问，他继续深入排查。。

三、锁定元凶

经过一层层调试，小刘把范围缩小到 Antd Tabs 组件

为了验证，他单独写了一个demo(codesandbox.io/p/sandbox/j...) 包裹内容区并设置滚动。

结果问题果然复现：只要页面在 Tabs 内，方向键就会失灵。

小刘眼前一亮：

"果然，罪魁祸首就是 Tabs组件！"

但他没有急着下结论，而是去社区翻阅资料。果不其然，在在 Ant Design GitHub issues (github.com/ant-design/...) 中，他找到了几乎一致的反馈。

原来，Antd Tabs 在渲染时，会给每个 TabPane 设置 tabindex=0 来管理焦点切换。但这带来一个副作用：

当用户点击某些非可聚焦元素时，焦点会"掉到"外层这个 div 上，从而劫持方向键，导致页面无法滚动：

小刘恍然大悟：

"原来是 tabindex 在背后搞鬼啊！之前还真没怎么注意过这个属性。"

于是，他决定彻底弄清楚 tabindex 的原理。。

四、问题原理解析

1.焦点与可聚焦元素

在应用程式型页面中，往往存在许多需要用户交互的元素。焦点（Focus） 是键盘交互的核心机制，它决定了用户当前能操作的对象。

在 HTML 中，元素可分为 可聚焦（focusable） 与 不可聚焦。常见的默认可聚焦元素包括(可聚焦元素详细兼容性(allyjs.io/data-tables...) )：

• <a> 标签（带 href 属性）
• <link> 标签（带 href 属性）
• <button>
• <input>（排除 type="hidden"）
• <select>
• <textarea>

这些元素天然支持一下能力：

• 键盘聚焦（通过 Tab 键切换）
• 脚本聚焦（通过 element.focus()）

👉 可以通过 document.activeElement 查看当前获得焦点的元素：

document.querySelector("a").focus();
console.log(document.activeElement); // 当前聚焦的元素

2.tabindex 是什么

tabindex 是所有 HTML 元素的通用属性，用于控制：

• 元素是否能被聚焦
• Tab 键导航的顺序（通常使用Tab键，因此得名）

非聚焦元素设置 tabindex 属性即可拥有可聚焦元素的能力，示例：

 <div tabindex="0"> 非聚焦元素，使用 tabindex 聚焦</div>

效果：

3.tabindex 的使用

tabindex 的最大值不应超过 32767。如果没有指定，它的默认值为 0。

tabindex 接受一个整数作为值，具有不同的结果，具体取决于整数的值。

• tabindex="0"
  • 元素可聚焦
  • 焦点顺序按照 DOM 的排列顺序
• tabindex="-1"
  • 元素不可通过 Tab 键导航获得焦点
  • 但仍可通过 JavaScript focus() 主动聚焦
• tabindex="1" 或更大值
  • 元素可通过 Tab 键获得焦点
  • 焦点顺序由开发者手动指定
  • ❌ 这种做法会打乱默认顺序，是一种 反模式（anti-pattern），应避免使用

👉 在实际开发中，应 仅使用 0 和 -1。

五、解决方案与实践

小刘最终总结出几种方案：

1. 去掉 Tabs 的 tabindex**
   • 优点：方向键立刻恢复正常
   • 缺点：容器不能再通过 Tab 键聚焦
2. 为滚动容器设置 tabindex="0"
   • 优点：可通过 Tab 聚焦后，用方向键滚动
   • 缺点：需要所有滚动容器都加 tabindex，代价过大

经过评估，小刘最终选择：去掉 Tabs 的 tabindex 。

这样不仅缩小了影响面，还能保证子应用页面任何位置都能正常使用方向键滚动。

六、终篇

一次看似离奇的"方向键失灵"，最终真凶竟是一个小小的 tabindex。

小刘从这次经历中总结出三点经验：

• 键盘焦点管理的重要性：不仅要考虑鼠标用户，也要考虑键盘用户和无障碍场景。
• 合理使用 tabindex ：0 用于需要聚焦的容器，-1 用于仅脚本控制，避免大于 1。
• 多关注社区：很多"诡异问题"，社区里可能早有人遇到。

最终，小刘把整个排查过程和 tabindex 的知识点记录下来，分享给团队和社区：

细节决定体验，一个小小的属性，可能改变整个页面的交互。