CSS瀑布流布局overflow-y scroll失效，仅overflow-x滚动问题求助

嘿，我帮你排查了这个问题——用-webkit-column-width实现瀑布流时，overflow-y无法正常工作、只能横向滚动，这其实是CSS多列布局的一个常见特性导致的坑！

问题根源 #

当你给容器设置column-width时，浏览器的行为是尽可能创建更多的列，直到容器的宽度放不下新的列为止。而你的#images容器设置了width:100%，这意味着浏览器会不断添加列，直到列的总宽度超出视口，容器被横向撑开，自然就触发了overflow-x:auto的横向滚动，而纵向的滚动空间被无限延伸的列数“吃掉”了，overflow-y:scroll也就失效了。

解决方案：固定列数+限制横向溢出 #

最稳妥的方式是改用column-count固定列数，让浏览器不再自动增加列，这样内容会在每列内纵向排列，当总高度超过容器的94%时，就会触发纵向滚动。修改后的样式代码如下：

#images {
  position: fixed;
  left: 0;
  width: 100%;
  height: 94%;
  overflow-x: hidden; /* 禁用横向滚动，避免不必要的滚动条 */
  overflow-y: scroll;
  text-align: center;
  z-index: 2147483647;
  /* 固定列数，根据你的13em列宽，可按需调整 */
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
  /* 让列内容自动填充容器高度，保证瀑布流效果 */
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
}

进阶适配：响应式列数 #

如果想要在不同屏幕尺寸下自动调整列数，可以结合媒体查询，兼顾瀑布流的自适应和滚动效果：

#images {
  position: fixed;
  left: 0;
  width: 100%;
  height: 94%;
  overflow-x: hidden;
  overflow-y: scroll;
  text-align: center;
  z-index: 2147483647;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
}

/* 桌面端（≥960px） */
@media (min-width: 60em) {
  #images {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }
}

/* 平板端（640px-959px） */
@media (min-width: 40em) and (max-width: 59.9em) {
  #images {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

/* 移动端（≤639px） */
@media (max-width: 39.9em) {
  #images {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

这样调整后，容器不会再被无限撑开，纵向滚动就能正常工作，同时还能保持瀑布流的布局效果。

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