只使一个部分可滚动，而不是整个页面

Question

我正在做一个项目，其中一个部分通过从数据库请求数据来填充元素，因此其中的元素数量非常多变。

棘手的部分是我们的设计基于不必在页面上滚动，而是在必要时在部分上滚动的想法。我认为在这些部分上使用 overflow 就足够了，但它并没有给我预期的结果。

我尝试了 overflow 属性的所有变体，scroll 显示滚动条但它似乎被冻结了。

如何使 section-one 本身可滚动，而不使页面的其余部分可滚动？

我创建了一个带有虚拟版本的代码笔来演示问题：http://codepen.io/leofontes/pen/aNaBox

body {
  overflow: hidden;
}

main {
  margin: 0;
  width: 100%;
  height: 100%;
}

.section-one {
  background-color: #FF0000;
  float: left;
  min-height: 1400px;
  overflow: visible;
  width: 15%;
}

.section-two {
  background-color: #00FF00;
  float: left;
  min-height: 1400px;
  width: 70%;
}

.section-three {
  background-color: #0000FF;
  min-height: 1400px;
  float: left;
  width: 15%;
}

<main>
  <section class="section-one">
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
  </section>
  <section class="section-two">
    <p>this is section two</p>
  </section>
  <section class="section-three">
    <p>this is section three</p>
  </section>
</main>

谢谢

Answer 1

对您的 CSS 进行这些调整：

html {
  height: 100%;                       /* note #1 */
}
body {
  height: 100%;                       /* note #1 */
  margin: 0;                          /* note #2 */
  overflow: hidden;
}
main {
  margin: 0;
  height: 100%;
}
.section-one {
  background-color: #FF0000;
  float: left;
  overflow-y: auto;                  /* new */
  width: 15%;
  height: 100%;                      /* note #3 */
}
.section-two {
  background-color: #00FF00;
  float: left;
  min-height: 1400px;
  width: 70%;
}
.section-three {
  background-color: #0000FF;
  min-height: 1400px;
  float: left;
  width: 15%;
}

<main>
  <section class="section-one">
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
    <p>this is section one</p>
  </section>
  <section class="section-two">
    <p>this is section two</p>
  </section>
  <section class="section-three">
    <p>this is section three</p>
  </section>

</main>

Revised Codepen

备注：

向元素添加 height 会导致 overflow 起作用。

只使一个部分可滚动，而不是整个页面

Make just one section scrollable, not the entire page

html

css

overflow