为可滚动元素应用样式仅可见部分生效 ngFor渲染列场景问题

• 你为列表外层滚动容器设置固定高度+overflow: auto后，内层列容器的默认高度仅匹配外层的可视区域高度，不会跟随内部滚动的内容总高度自动拉伸，因此绑定在列上的样式只能覆盖可视范围，滚动超出部分就会失效
• sticky头部未设置正确的定位基准和层级，也可能连带影响列容器的样式渲染范围

1. 给外层滚动容器添加position: relative，作为所有内部元素的定位基准
2. 给包裹所有列的内容容器设置display: flex和width: fit-content，保证横向滚动正常、列之间排版对齐
3. 给每一列的容器添加min-height: 100%属性，强制列容器高度和内部所有单元格的总高度对齐，你绑定在列上的样式就会覆盖整列所有内容
4. 粘性头部除了设置position: sticky之外，还要补充top: 0和大于列内容的z-index值，同时指定背景色避免内容滚动时透上来

模板代码 #

<div class="scroll-container">
  <!-- 粘性头部 -->
  <div class="header-row">
    <div class="header-col" *ngFor="let col of columnList">{{col.label}}</div>
  </div>
  <!-- 列内容包裹层 -->
  <div class="col-wrapper">
    <div class="column-item" *ngFor="let col of columnList">
      <div class="cell-item" *ngFor="let row of col.rowData">{{row.content}}</div>
    </div>
  </div>
</div>

样式代码 #

.scroll-container {
  height: 600px; /* 你需要的高度限制 */
  overflow: auto;
  position: relative;
}

.header-row {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 9;
  background: #ffffff;
}

.header-col {
  width: 180px;
  padding: 8px 12px;
  border: 1px solid #e8e8e8;
}

.col-wrapper {
  display: flex;
  width: fit-content;
}

.column-item {
  width: 180px;
  min-height: 100%; /* 核心修复属性 */
  background: #fafafa; /* 你要添加的列样式 */
}

.cell-item {
  padding: 8px 12px;
  border: 1px solid #e8e8e8;
}

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