如何让横向滚动容器实现固定附着元素效果？

优化后的代码实现 #

HTML

<div class="container">
  <div class="header">
    <strong>Lorem ipsum dolor sit amet consectetur.</strong>
    <div class="another-element"></div>
  </div>
  <div class="row">
    <div class="blue-square"></div>
    <div class="row-content">Lorem ipsum dolor sit amet consectetur.</div>
  </div>
  <div class="row">
    <div class="blue-square"></div>
    <div class="row-content">Lorem ipsum dolor sit amet consectetur. Euismod in sit tellus faucibus nec. Congue arcu in vel cum euismod vulputate. At nunc purus aliquam nunc curabitur turpis libero. Dolor tortor urna purus odio velit. Lorem ipsum dolor sit amet consectetur. Euismod in sit tellus faucibus nec. Congue arcu in vel cum euismod vulputate. At nunc purus aliquam nunc curabitur turpis libero. Dolor tortor urna purus odio velit.</div>
  </div>
  <div class="row">
    <div class="blue-square"></div>
    <div class="row-content">Lorem ipsum dolor sit amet consectetur.</div>
  </div>
  <div class="row">
    <div class="blue-square"></div>
    <div class="row-content">Lorem ipsum dolor sit amet consectetur.</div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.container {
  max-width: 30rem;
  overflow-x: auto;
  margin: 2rem auto;
  position: relative;
  padding-left: 3rem; /* 给蓝色方块预留固定位置 */
}

.header {
  background: #D9D9D9;
  padding: 1.56rem 1.18rem;
  position: sticky;
  left: 3rem; /* 与container的padding-left保持一致，确保滚动时对齐 */
  display: flex;
  justify-content: space-between;
  width: calc(100% - 3rem); /* 减去左侧预留的方块宽度区域 */
}

.another-element {
  width: 1.25rem;
  height: 1.25rem;
  background: #529C9A;
}

.row {
  display: flex;
  align-items: center;
  min-width: calc(60rem + 3rem); /* 加上左侧预留区域宽度，保证内容足够长可滚动 */
  background: #F4F4F4;
}

.row:nth-child(odd):not(.header) {
  background: #D9D9D9;
}

.blue-square {
  width: 1.25rem;
  height: 1.25rem;
  background: #53A5D3;
  position: absolute;
  left: 1rem; /* 控制方块与容器左侧的间距 */
}

.row-content {
  padding: 1.56rem 1.18rem;
  width: 100%;
}

关键调整说明 #

• 容器布局优化：给.container设置padding-left预留蓝色方块的固定位置，避免方块与滚动内容重叠。
• Header固定对齐：将.header的left值设为与容器左侧内边距一致，同时调整宽度确保滚动时不会偏移，始终与内容区域对齐。
• 行结构重构：把行内容单独放入.row-content容器，用flex布局实现蓝色方块与内容的垂直居中，同时通过position: absolute固定蓝色方块的位置，横向滚动时保持不动。
• 奇偶行样式修正：调整选择器，避免Header被误判为奇数行应用背景色。

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