如何让 div 垂直滚动并显示渐变答案

【问题标题】：How to get a div to scroll vertically and reveal gradient如何让 div 垂直滚动并显示渐变
【发布时间】：2018-04-05 16:20:14
【问题描述】：

我试图让三个 div 水平并排。我希望最左边的 div 滚动，因此渐变会在用户滚动时显示出来。出于某种原因，div 不相邻，左侧不滚动，我不知道为什么。

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100%; height: 100%}

.overall {
  height: 100%;
}

.scroll {
  width: 10%;
  height: 200%;
  background: linear-gradient(#e66465, #9198e5);
  overflow-y: scroll;
}

.one {
  width: 70%;
  height: 100%;
  background: lightgreen;
}

.two {
  width: 20%;
  height: 100%;
  background: lightblue;
}

<div class="overall">
  <div class="scroll"></div>
  <div class="one"></div>
  <div class="two"></div>
</div>

【问题讨论】：

澄清：我希望 div 水平相邻，因此它们的总宽度增加到 100%。但我也希望渐变 div 垂直滚动。

标签： html css scroll scrollbar linear-gradients

【解决方案1】：

它们没有水平放置，因为div 是块级元素 默认，这意味着它们占据了整个行 / 屏幕宽度。

如今，如果需要将它们水平放置，他/她通常会在 父元素上设置 Flexbox 或 display: flex 时间>。当然也有其他的方法。

对于scrolling，它不会scroll，因为scroll 没有任何东西。在.scrolldiv里面放一些"tall"足够的content（大于200%的集合height），在“动作”：

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100%; height: 100%}

.overall {
  display: flex; /* displays flex-items (children) inline by default */
  height: 100%;
}

.scroll {
  /*width: 10%;*/
  flex: 1; /* flexbox way of defining width */
  height: 200%; /* necessary ? */
  background: linear-gradient(#e66465, #9198e5);
  overflow-y: auto; /* modified, only shows the scrollbar when needed */
}

.one {
  /*width: 70%;*/
  flex: 7;
  /*height: 100%; not necessary, takes the parents height */
  background: lightgreen;
}

.two {
  /*width: 20%;*/
  flex: 2;
  /*height: 100%;*/
  background: lightblue;
}

<div class="overall">
  <div class="scroll">
    <p style="height: 250%">Some looooong paragraph which is taller that its parent...just for demo...</p>
  </div>
  <div class="one"></div>
  <div class="two"></div>
</div>

【讨论】：