CSS position:sticky在水平滚动场景下失效的技术问询

我有一个包含宽表格和标准表单字段的HTML表单，需求如下：

• 窗口/框架支持水平滚动，表格随滚动正常移动
• 表单字段保持固定位置
• 水平滚动条需置于整个框架上（之前把表格单独放入可滚动div时，必须滚动到表格底部才能看到滚动条，体验不佳）

目前实现效果接近需求，但存在两个问题：

1. 希望红色div的宽度设为100vw而非50vw
2. 仅在宽屏时生效，窄屏场景下输入框仅短暂固定后会随滚动消失

核心修改围绕容器滚动规则和粘性元素的参照对象调整，同时优化窄屏适配：

完整代码 #

HTML #

<div class="form-container">
  <div class="sticky-field">
    <label>
      姓名:
      <input type="text" name="name" />
    </label>
  </div>
  <div class="sticky-field">
    <label>
      邮箱:
      <input type="email" name="email" />
    </label>
  </div>
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>列1</th>
        <th style="min-width: 200px">列2</th>
        <th style="min-width: 100px">列3</th>
        <th>列4</th>
        <th>列5</th>
        <th>列6</th>
        <th>列7</th>
        <th>列8</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
        <td>数据4</td>
        <td>数据5</td>
        <td>数据6</td>
        <td>数据7</td>
        <td>数据8</td>
      </tr>
    </tbody>
  </table>

  <div class="sticky-field">
    <label>
      备注:
      <textarea name="comments" rows="4"></textarea>
    </label>
  </div>
  <div class="sticky-field">
    <button type="submit">提交</button>
  </div>
</div>

CSS #

.form-container {
  padding: 10px;
  border: 1px solid #ccc;
  display: unset;
  overflow-x: auto; /* 让整个容器触发水平滚动，滚动条始终显示在容器底部 */
}

.sticky-field {
  position: sticky;
  left: 10px;
  color: red;
  border: solid 1px red;
  width: 100vw; /* 设置为100vw满足宽度需求 */
  background: white; /* 避免表格内容滚动时穿透显示 */
  margin-bottom: 10px; /* 增加间距，避免与表格重叠 */
}

label {
  display: block;
  padding: 10px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
}

thead th {
  background-color: #f8f8f8;
  position: sticky;
  top: 0; /* 表头垂直滚动时固定，可选优化 */
}

JavaScript #

function createRowCopies(tr, num) {
  if (!tr || num <= 0) return;

  if (!(tr instanceof HTMLTableRowElement)) {
    console.error("传入的行元素无效");
    return;
  }

  for (let i = 0; i < num; i++) {
    const clone = tr.cloneNode(true);
    tr.parentNode.insertBefore(clone, tr.nextSibling);
    tr = clone;
    tr.children[0].innerHTML = i + 2;
  }
}
createRowCopies(document.querySelector('tbody tr'), 30);

关键修改说明 #

1. 容器滚动规则调整：给.form-container添加overflow-x: auto并移除max-width:100%，让容器根据内容宽度自动触发水平滚动，滚动条始终显示在容器底部，无需滚动到表格位置才能看到。
2. 表单字段固定优化：
   • 设置width:100vw满足宽度需求
   • 添加background:white，避免水平滚动时表格内容透过表单字段显示
   • 新增.sticky-field类统一管理固定字段，代码更易维护
3. 窄屏适配修复：通过让容器而非视口作为滚动容器，position:sticky的参照对象变为容器，窄屏时表单字段会始终固定在容器左侧，不会随滚动消失。

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