页面刷新后未自动聚焦，无法通过键盘箭头键初始滚动

问题核心是页面加载完成后，整个页面没有获得焦点，导致键盘滚动事件不触发。autofocus属性只针对表单控件生效，对页面整体焦点没用，所以靠它解决不了。

给你几个可行的解决方案：

• 强制给页面主体设置焦点
  给body元素添加tabindex="-1"（让它能接收焦点但不会被Tab键选中），然后在页面加载完成后调用focus()：

  window.addEventListener('load', () => {
    const body = document.body;
    body.setAttribute('tabindex', '-1');
    body.focus();
    // 可选：聚焦后移除tabindex，避免潜在的交互影响
    setTimeout(() => body.removeAttribute('tabindex'), 0);
  });
  

• 更早触发聚焦操作
  如果load事件触发太晚，改用DOMContentLoaded事件，在DOM结构加载完成后就执行：

  document.addEventListener('DOMContentLoaded', () => {
    const body = document.body;
    body.setAttribute('tabindex', '-1');
    body.focus();
  });
  

• 应对浏览器安全限制
  部分浏览器会阻止无用户交互的自动聚焦，这种情况可以记录用户第一次交互状态，后续刷新自动聚焦：

  // 页面加载时检查是否已有交互记录
  if (localStorage.getItem('pageFocused')) {
    const body = document.body;
    body.setAttribute('tabindex', '-1');
    body.focus();
  }
  
  // 监听第一次点击，标记交互状态
  document.addEventListener('click', function initFocus() {
    localStorage.setItem('pageFocused', 'true');
    const body = document.body;
    body.setAttribute('tabindex', '-1');
    body.focus();
    // 只执行一次监听
    document.removeEventListener('click', initFocus);
  }, { once: true });
  

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