如何用HTML、CSS和React实现类似Instagram Stories的横向滚动组件？

你的代码核心问题在于flex子元素默认会被压缩，导致无法触发横向滚动。以下是修复后的完整代码：

修复后的CSS #

.scroller{
  height: 125px;
  width: 300px;
  background-color: blue;
  overflow-x: scroll;
  overflow-y: hidden;
  /* 可选：隐藏滚动条，贴近Instagram视觉风格 */
  scrollbar-width: none;
}
/* 兼容Chrome/Safari隐藏滚动条 */
.scroller::-webkit-scrollbar {
  display: none;
}
.itemContainer{
  display: flex;
  flex-wrap: nowrap; /* 强制子元素在单行排列 */
}
.item{
  flex-shrink: 0; /* 关键属性：禁止元素被压缩 */
  width: 100px;
  height: 100px;
  background-color: lime;
  margin: 5px;
}

对应的HTML（无需修改） #

<div class="scroller">
   <div class="itemContainer">
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
     <div class="item"></div>
  </div>
</div>

关键修复点说明 #

• flex-shrink: 0：给.item添加这个属性，阻止flex布局自动压缩子元素宽度，确保每个item保持设定的100px宽度+5px margin，总宽度超过.scroller的300px后，自然触发横向滚动。
• flex-wrap: nowrap：明确指定子元素不换行，这是flex布局的默认值，但显式设置可以避免意外换行问题。
• 可选的滚动条隐藏：通过scrollbar-width: none和::-webkit-scrollbar隐藏滚动条，更贴近Instagram Stories的视觉效果。

如果需要平滑滚动体验，还可以给.scroller添加scroll-behavior: smooth属性。

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