实现水平滚动时header始终居中视口，垂直滚动可移出视野

需求说明 #

需要让页面的<header>元素满足：

• 水平滚动时：header内容始终保持在视口水平中心位置
• 垂直滚动时：header可随页面正常滚出视野，不会固定在顶部

之前尝试的position: sticky; left: 0方案无法实现居中效果；position: fixed方案存在两个问题：打开<details>时布局失效，且在Firefox Mobile中完全无法工作。

解决方案（少量原生JS + 纯语义HTML） #

该方案通过监听水平滚动事件动态调整header位置，同时保留垂直方向的正常滚动行为，兼容所有主流浏览器（包括Firefox Mobile），并处理了<details>展开/收起的布局变化。

1. CSS 样式

header {
  text-align: center;
  position: relative;
  width: fit-content; /* 自适应内容宽度，便于计算居中位置 */
  margin: 0 auto; /* 初始状态保持居中 */
}

/* 模拟大表格的样式（保留原有逻辑） */
p.text {
  width: 20rem;
  height: 50rem;
}

body {
  overflow-x: auto; /* 允许页面水平滚动 */
  margin: 0; /* 清除默认边距避免布局偏移 */
}

2. HTML 结构（无需修改，保持原语义化结构）

<html>
<body>
  <header>
    <h1>Page Title</h1>
    <details>
      <summary>Click Me</summary>
      <p>More information</p>
      <p>Even more stuff</p>
    </details>
  </header>
  <table>
    <tr>
      <td><p class="text">Lorem</p></td>
      <td><p class="text">ipsum</p></td>
      <td><p class="text">dolors</p></td>
      <td><p class="text">itamet</p></td>
      <td><p class="text">consectetura</p></td>
      <td><p class="text">dipiscinge</p></td>
      <td><p class="text">litsed</p></td>
      <td><p class="text">doeiusmod</p></td>
    </tr>
    <tr>
      <td><p class="text">Lorem</p></td>
      <td><p class="text">ipsum</p></td>
      <td><p class="text">dolors</p></td>
      <td><p class="text">itamet</p></td>
      <td><p class="text">consectetura</p></td>
      <td><p class="text">dipiscinge</p></td>
      <td><p class="text">litsed</p></td>
      <td><p class="text">doeiusmod</p></td>
    </tr>
  </table>
</body>
</html>

3. 原生JS 逻辑

const header = document.querySelector('header');
const details = document.querySelector('details');

// 计算并设置header的水平居中位置
function setHeaderCenter() {
  const scrollX = window.scrollX;
  // 计算偏移量：视口半宽 - header自身半宽 + 水平滚动距离
  const offset = (window.innerWidth / 2) - (header.offsetWidth / 2) + scrollX;
  header.style.left = `${offset}px`;
}

// 监听页面滚动事件，实时调整header位置
window.addEventListener('scroll', setHeaderCenter);

// 初始化时执行一次，确保初始位置正确
setHeaderCenter();

// 监听details的展开/收起事件，重新计算位置（避免宽度变化导致居中失效）
details.addEventListener('toggle', setHeaderCenter);

方案优势 #

• 完全保留原语义化HTML结构，无冗余嵌套
• JS代码轻量无依赖，兼容所有现代浏览器及Firefox Mobile
• 自动处理<details>展开/收起导致的header宽度变化问题
• 垂直滚动时header正常滚出视野，完全符合需求

内容的提问来源于stack exchange，提问作者jáquer