重置初始键盘导航tabindex，同时为鼠标用户实现scrollIntoView

我需要实现点击按钮时的两个需求：

• 滚动到表单的特定区域
• 页面顶部的Skip-Nav链接（id为skipnav）作为键盘用户首次按TAB时的焦点起点，不需要自动聚焦，但按TAB时必须从这个元素开始切换。

我写了以下代码，但无法正常工作：

// Focus/blur "skipnav" to prepare initial TAB-ing for keyboard users, AND scroll to section for mouse users
document.getElementById('skipnav')?.focus();
document.getElementById('skipnav')?.blur();
var stepIndicatorElement = document.getElementsByClassName("usa-step-indicator")[0];
if (stepIndicatorElement) {
    stepIndicatorElement.scrollIntoView();
}

遇到的问题：

• 单独使用focus()/blur()组合时，首次按TAB会直接跳到skipnav之后的下一个元素，达不到从skipnav开始的效果
• 调用scrollIntoView()后，虽然没有立即聚焦任何元素，但会改变TAB顺序，首次按TAB会直接聚焦滚动区域内的第一个元素。就算加上focus()/blur()代码，还是会出现这个问题——想问scrollIntoView()会不会在未聚焦元素的情况下重置或改变TAB顺序？

解决方案 #

核心问题是浏览器的焦点记忆机制：当页面内容滚动后，浏览器会默认将TAB的起始焦点调整到可视区域内的第一个可聚焦元素，这就是scrollIntoView()影响TAB顺序的原因。要解决这个问题，得绕过浏览器的默认行为，同时保留skipnav的焦点起始位置：

方法1：延迟锁定焦点记忆

不要用focus()/blur()的无效组合，而是利用setTimeout让浏览器先完成滚动计算，再强制更新焦点记忆：

// 替换成你的按钮选择器
document.querySelector('your-button-selector').addEventListener('click', function() {
  const skipNav = document.getElementById('skipnav');
  const stepIndicator = document.querySelector('.usa-step-indicator');

  // 先让skipnav获得焦点，为后续锁定做准备
  skipNav.focus();
  
  // 执行滚动操作，behavior可选smooth实现平滑滚动
  if (stepIndicator) {
    stepIndicator.scrollIntoView({ behavior: 'auto' });
  }

  // 延迟执行：让浏览器先处理滚动，再更新焦点记忆
  setTimeout(() => {
    skipNav.focus();
    skipNav.blur();
  }, 0);
});

方法2：临时修改滚动区域元素的tabindex

如果方法1无效，可以临时让滚动区域内的元素不可TAB聚焦，滚动完成后再恢复：

// 替换成你的按钮选择器
document.querySelector('your-button-selector').addEventListener('click', function() {
  const skipNav = document.getElementById('skipnav');
  const stepIndicator = document.querySelector('.usa-step-indicator');
  
  if (!stepIndicator) return;

  // 收集滚动区域内所有可聚焦元素的原始tabindex
  const focusableEls = stepIndicator.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
  const originalTabIndices = [];

  // 临时设置为不可TAB聚焦
  focusableEls.forEach(el => {
    originalTabIndices.push(el.getAttribute('tabindex'));
    el.setAttribute('tabindex', '-1');
  });

  // 执行滚动
  stepIndicator.scrollIntoView();

  // 滚动完成后恢复元素tabindex，并锁定焦点起始点
  setTimeout(() => {
    focusableEls.forEach((el, idx) => {
      const original = originalTabIndices[idx];
      if (original === null) {
        el.removeAttribute('tabindex');
      } else {
        el.setAttribute('tabindex', original);
      }
    });
    
    // 让skipnav成为TAB起始点
    skipNav.focus();
    skipNav.blur();
  }, 100);
});

原理说明 #

• 浏览器的TAB起始位置由最后一次失去焦点的元素或可视区域内第一个可聚焦元素决定，scrollIntoView()会触发可视区域重新计算，覆盖之前的焦点记忆。
• 用setTimeout延迟执行focus()/blur()，能让浏览器先完成滚动和可视区域更新，再强制把焦点记忆锚定到skipnav。

内容的提问来源于stack exchange，提问作者gene b.