2D滚动窗口中CSS scroll-snap横向失效的解决方法咨询

问题根源 #

1. Flex子元素自动收缩：.scroll-x 使用 display: flex，其内部的 .box 默认启用 flex-shrink: 1，当 .scroll-x 宽度被父容器限制为100px时，.box 会被压缩到50px，无法触发横向滚动，scroll-snap 自然失效。
2. 冗余属性设置：.scroll-x 错误添加了 scroll-snap-align: start，该属性仅作用于滚动容器的子元素，而非容器本身。
3. 宽度配置冲突：.scroll-x 的 min-width: 200px 被父容器 .scroll-y 的 max-width: 100px 覆盖，导致横向滚动空间不足。

修复后的完整代码 #

.scroll-y,
.scroll-x,
.box {
  height: 100px;
  font-size: 80px;
  color: white;
}

.scroll-y {
  overflow: auto;
  scroll-snap-type: y proximity;
  max-width: 100px;
  margin: 0 auto;
  border: 5px solid #666
}

.scroll-x{
  scroll-snap-type: x proximity;
  display: flex;
  overflow-x: auto;
  width: 100%;
}

.box {
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  flex-shrink: 0;
  background: coral
}

.scroll-x:nth-child(even) .box:nth-child(even),
.scroll-x:nth-child(odd) .box:nth-child(odd){
  background: gold
}

<div class="scroll-y">
  <div class="scroll-x">
      <div class="box">1</div>
      <div class="box">2</div>
  </div>
  <div class="scroll-x">
      <div class="box">3</div>
      <div class="box">4</div>
  </div>
  <div class="scroll-x">
      <div class="box">5</div>
      <div class="box">6</div>
  </div>
  <div class="scroll-x">
      <div class="box">7</div>
      <div class="box">8</div>
  </div>
  <div class="scroll-x">
      <div class="box">9</div>
      <div class="box">10</div>
  </div>
</div>

关键修改说明 #

• 给 .box 添加 flex-shrink: 0：阻止flex子元素被压缩，确保每个 .box 保持100px宽度，总宽度超出 .scroll-x 的100px，触发横向滚动。
• 移除 .scroll-x 上的 scroll-snap-align: start：该属性属于子元素配置，容器只需设置 scroll-snap-type。
• 将 .scroll-x 的 overflow 改为 overflow-x: auto：明确指定X方向滚动，同时设置 width: 100% 继承父容器宽度，确保滚动触发条件。

修改完成后，X方向的 scroll-snap 会正常生效，拖动横向滚动条时，.box 会自动吸附到起始位置。

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