如何在同一個父容器中使兩個div彼此獨立滾動？

我想弄清楚如何讓我的兩個divs彼此獨立滾動。這是一個fiddle顯示我迄今爲止。您會注意到，當您滾動到「.livebar」的底部和頂部時，它也會更改「.site-page-container」的位置。如何在同一個父容器中使兩個div彼此獨立滾動？

這裏是我的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頁容器」的底部和頂部，它的運動呢不會影響「.livebar」的位置。

我該如何讓「.livebar」div獨立於「.site-page-container」div捲動並且不會以任何方式影響它？

來源

2017-01-01 hoolakoola

我認爲問題是因爲右側的滾動條實際上是一個父元素滾動條（它適用於兩個div）。

嘗試給

overflow:hidden

身體標記和

overflow:scroll

到站點頁面的容器類

來源

2017-01-02 06:29:42 Visrozar

如何在同一個父容器中使兩個div彼此獨立滾動？

回答

相關問題