如何使同一个父容器中的两个 div 相互独立滚动？

Question

我想弄清楚如何让我的两个 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 滚动并且不以任何方式影响它？

Answer 1

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

尝试给予

overflow:hidden

到正文标签和

overflow:scroll

到站点页面容器class

如何使同一个父容器中的两个 div 相互独立滚动？

How can I make two divs within the same parent container scroll independently of each other?

html

css

scrollbar