Question

我试图弄清楚如何让我的两个div彼此独立滚动。这是fiddle显示我到目前为止所拥有的内容。正如您将注意到的，当您滚动到＆＃34; .livebar＆＃34;的底部和顶部时，它还会更改＆＃34; .site-page-container＆＃34;的位置。

这是我的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;
}

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

我怎样才能使＆＃34; .livebar＆＃34; div滚动独立于＆＃34; .site-page-container＆＃34; div并没有以任何方式影响它？

Answer 1

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

尝试给予

overflow:hidden

到正文标记和

overflow:scroll

到site-page-container class

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

1 个答案: