x轴滚动内容场景下Sticky侧边栏失效问题解决方案咨询

当position: sticky元素的父容器存在横向滚动（overflow-x: auto/scroll）时，sticky的粘滞范围会被限制在该父容器内，横向滚动时侧边栏会跟随父容器移动，导致看起来“失效”。另外，未指定left/right属性时，sticky无法确定粘滞位置，也是问题原因之一。

解决方案一：将横向滚动限制在内容容器，保留sticky特性 #

修改CSS如下：

.align {
  display: flex;
  /* 禁止父容器横向滚动，把滚动交给子容器 */
  overflow-x: visible;
}

.container {
  display: flex;
  /* 让内容容器单独横向滚动 */
  overflow-x: auto;
  /* 占据剩余宽度 */
  flex: 1;
}

.item {
  min-width: 500px;
  background-color: red;
  margin-right: 10px;
}

.ul {
  position: sticky;
  background-color: yellow;
  /* 指定粘滞在左侧 */
  left: 0;
  /* 固定侧边栏宽度 */
  width: 100px;
  /* 保持高度自适应内容 */
  align-self: flex-start;
}

修改说明：

• 让横向滚动仅发生在.container上，.align不再产生滚动条，此时sticky元素的粘滞参考是视口，横向滚动时侧边栏不会跟随移动。
• 添加left: 0明确粘滞位置，设置固定宽度避免flex布局下被压缩，align-self: flex-start保证侧边栏高度与内容匹配。

解决方案二：使用position: fixed实现全局固定 #

如果需要侧边栏始终固定在视口左侧，不受任何滚动影响，可改用position: fixed：

.align {
  display: flex;
  overflow-x: auto;
  /* 给固定侧边栏留出左侧空间 */
  padding-left: 100px;
}

.container {
  display: flex;
}

.item {
  min-width: 500px;
  background-color: red;
  margin-right: 10px;
}

.ul {
  position: fixed;
  left: 0;
  top: 0;
  background-color: yellow;
  width: 100px;
}

修改说明：

• 固定侧边栏到视口左侧，通过给.align添加左内边距，避免内容被侧边栏遮挡。
• 此方案下侧边栏会始终停留在视口左侧，无论页面横向或纵向滚动。

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