如何实现页面水平滚动时指定元素不随动且支持垂直滚动？

这个需求刚好可以通过CSS的position: sticky属性完美解决——它既能让头部在垂直滚动时跟着页面移动，又能在水平滚动时固定在视口左侧，完全避开了你不能用position: fixed的限制，同时还支持页面整体水平滚动。

实现思路 #

• 给.header-wrapper设置position: sticky + left: 0：这是核心，当页面横向滚动时，它会牢牢粘在视口左侧，不会跟着页面一起移动；垂直滚动时则和普通元素一样跟随页面上下走
• 明确设置.header-wrapper的宽度为500px（和初始浏览器窗口宽度一致），再加上背景色，确保它能覆盖住下方可能滚动过来的内容
• 保持.some-wide-content的1000px宽度，让页面自然触发整体水平滚动

完整代码示例 #

<div class='header-wrapper'>
  <div class='title'>Title</div>
</div>
<div class='some-wide-content'>
  <!-- 示例1000px宽的表格 -->
  <table style="width: 1000px; border-collapse: collapse;">
    <tr>
      <td style="border: 1px solid #ccc; padding: 8px;">列1</td>
      <td style="border: 1px solid #ccc; padding: 8px;">列2</td>
      <td style="border: 1px solid #ccc; padding: 8px;">列3</td>
      <td style="border: 1px solid #ccc; padding: 8px;">列4</td>
      <td style="border: 1px solid #ccc; padding: 8px;">列5</td>
      <td style="border: 1px solid #ccc; padding: 8px;">列6</td>
      <td style="border: 1px solid #ccc; padding: 8px;">列7</td>
      <td style="border: 1px solid #ccc; padding: 8px;">列8</td>
      <td style="border: 1px solid #ccc; padding: 8px;">列9</td>
      <td style="border: 1px solid #ccc; padding: 8px;">列10</td>
    </tr>
    <!-- 多添加几行方便测试垂直滚动 -->
    <tr><td colspan="10" style="height: 200px; border:1px solid #ccc;"></td></tr>
    <tr><td colspan="10" style="height: 200px; border:1px solid #ccc;"></td></tr>
    <tr><td colspan="10" style="height: 200px; border:1px solid #ccc;"></td></tr>
  </table>
</div>

.header-wrapper {
  position: sticky;
  left: 0;
  width: 500px;
  background-color: #f0f0f0; /* 自定义背景色，避免被下方内容穿透 */
  padding: 1rem 0;
}

.title {
  text-align: center; /* 实现title水平居中 */
  font-size: 1.2rem;
  font-weight: 600;
}

/* 可选：给body添加上下边距，方便测试垂直滚动 */
body {
  margin: 0;
  padding-bottom: 400px;
}

效果验证 #

• 垂直滚动：.header-wrapper会和页面内容一起上下移动，完全符合你需要的垂直跟随效果
• 水平滚动：.header-wrapper固定在视口左侧不动，只有表格所在的内容区域会横向滚动，同时页面整体的水平滚动条正常显示

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