横向滚动问题：滚动到特定位置时sticky元素随行移动

问题场景与现象 #

• 布局结构：横向滚动容器.container内包含多行.row，每行左侧是设置了position: sticky; left: 0的固定宽度元素.row__sticky，右侧是宽度5000px的宽内容.row__content
• 需求：容器横向滚动时，所有行的sticky元素保持在初始位置不跟随滚动
• 异常现象：当滚动距离超过「容器可视宽度 - sticky元素宽度」时，sticky元素会突然跟随所在行一起滚动
• 临时方案：给.row设置固定宽度5300px（sticky宽度+内容宽度）可临时解决，但属于硬编码的不合理方案

问题原因 #

position: sticky的粘性定位是相对于最近的可滚动祖先元素生效，但如果父元素.row的宽度不足以覆盖「容器可视区域 + sticky元素宽度」，当滚动到一定程度时，sticky元素会触及父元素.row的右边界，此时粘性定位失效，元素会跟随父元素滚动。

合理解决方案 #

不需要硬编码row宽度，只需确保每个.row的宽度至少撑满内容所需的总宽度（sticky+content），以下两种方法均可实现：

方法一：利用Flex布局拉伸行宽 #

给容器.container设置flex-direction: column的Flex布局，让每行自动拉伸到容器的内容宽度（即最长内容的宽度）：

.container {
  border: 3px solid lightgreen;
  overflow: auto;
  font-size: 24px;
  display: flex;
  flex-direction: column;
}

.row {
  border: 5px solid red;
  white-space: nowrap;

  .row__sticky {
    display: inline-block;
    position: sticky;
    left: 0;
    width: 300px;
    background: white;
  }

  .row__content {
    display: inline-block;
    color: white;
    background: #ff9900; /* 补全原样式缺失的分号 */
    width: 5000px;
  }
}

方法二：使用min-width确保行宽足够 #

给.row设置width: 100%同时搭配min-width: fit-content，让行宽至少适配内容所需的最小宽度：

.row {
  border: 5px solid red;
  white-space: nowrap;
  width: 100%;
  min-width: fit-content;

  .row__sticky {
    display: inline-block;
    position: sticky;
    left: 0;
    width: 300px;
    background: white;
  }

  .row__content {
    display: inline-block;
    color: white;
    background: #ff9900; /* 补全原样式缺失的分号 */
    width: 5000px;
  }
}

注意点 #

原CSS中.row__content的background属性后缺失分号，会导致后续样式解析错误，需要补上。

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