如何使同一个父容器中的两个 div 彼此独立滚动？答案

【问题标题】：How can I make two divs within the same parent container scroll independently of each other?如何使同一个父容器中的两个 div 彼此独立滚动？
【发布时间】：2017-01-02 14:29:42
【问题描述】：

我想弄清楚如何让我的两个 div 彼此独立滚动。这是一个fiddle，显示了我到目前为止所拥有的。您会注意到，当您滚动到“.livebar”的底部和顶部时，它也会改变“.site-page-container”的位置。

这是我的html：

<div class="container">

<div class="livebar-container">
 <div class="livebar">
  <h1>
  This is the livebar
  </h1>
   <p>
    //content
   </p>
   <br>
   <p>
    //content
   </p>
 </div>
</div>

<header class="site-header">
 <h1>
  This is the header
 </h1>
</header>

<div class="site-page-container">
 <div class="site-page">
  <h1>
   This is the site page
  </h1>
   <p>
    //content
   </p>
   <br>
   <p>
    //content
   </p>
 </div>
</div>

</div>

这是我的 CSS：

.livebar-container {
    overflow: hidden;
}
.livebar {
    overflow: auto;
    position: fixed;
    left: 0;
    text-align: center;
    float: left;
    width: 20%;
    height: 100%;
    background-color: blue;
}

div.container {
    max-width: 100vw;
    height: 100%;
    margin: 0 auto;
    padding: 0;

}

.site-page-container {
    height: 100vh;
    width: 80%;
    float: right;
    margin-top: auto;
    background-color: green;
}

.site-page {
    display: inline-block;
    width: auto;
    height: auto;
}

.site-header {
    background-color: purple;
    width: 80%;
    height: auto;
    text-align: center;
    position: fixed;
    right: 0;
    float: right;
}

当您滚动到“.site-page-container”的底部和顶部时，它的移动不会影响“.livebar”的位置。

我怎样才能使“.livebar” div 独立于“.site-page-container” div 滚动并且不会以任何方式影响它？

【问题讨论】：

标签： html css scrollbar

【解决方案1】：

我认为问题在于右侧的滚动条实际上是父元素滚动条（适用于两个 div）。

尝试给予

overflow:hidden

到正文标签和

overflow:scroll

到站点页面容器类

【讨论】：