如何实现Div垂直滚动渐显渐变效果？并排Div布局问题排查

嘿，我来帮你搞定这个布局问题！你的核心需求是三个div水平排列，左侧div能垂直滚动且滚动时渐变逐步显现，咱们一步步来修正：

问题分析 #

原代码的核心问题有两个：

1. 没有给父容器设置水平排列的布局规则，div默认是块级元素，会垂直堆叠；
2. 左侧.scroll的高度设置逻辑有问题，且缺少足够长的内容触发滚动，导致滚动条无法正常显示。

修正后的完整代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 避免页面整体出现滚动条 */
}
.overall {
  height: 100%;
  display: flex; /* 关键：让子元素水平并排 */
}
.scroll {
  width: 10%;
  height: 100%; /* 高度和父容器保持一致 */
  overflow-y: auto; /* 内容超出时自动显示滚动条 */
  background: linear-gradient(#e66465, #9198e5);
}
/* 给左侧滚动div添加足够长的内容，触发滚动行为 */
.scroll-content {
  height: 200%; /* 内容高度超过容器，确保能滚动 */
}
.one {
  width: 70%;
  height: 100%;
  background: #f0f0f0; /* 补全背景色方便查看布局 */
}
.two {
  width: 20%;
  height: 100%;
  background: #ccc; /* 补全第三个div的样式 */
}

对应的HTML结构示例：

<div class="overall">
  <div class="scroll">
    <div class="scroll-content">
      这里是左侧滚动内容<br>
      多添加几行内容或者通过高度设置让它超出容器<br>
      滚动时就能逐步看到渐变的不同颜色区段啦
    </div>
  </div>
  <div class="one">中间内容区域</div>
  <div class="two">右侧内容区域</div>
</div>

关键改动说明 #

• 给.overall添加display: flex：这是实现水平并排最简洁的方案，flex布局会自动让子元素在同一行排列；
• 给html, body加overflow: hidden：锁定页面整体滚动，确保只有左侧div内部可滚动；
• 调整.scroll高度并新增.scroll-content：让内容高度超出容器，触发滚动条，滚动时渐变背景会随内容滚动逐步展示不同颜色；
• 补全了中间和右侧div的背景色，方便直观验证布局效果。

如果想要渐变背景固定（滚动内容时背景不移动），可以给.scroll加上background-attachment: fixed，你可以根据实际需求调整~

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