同じ親コンテナ内で2つのdivを互いに独立してスクロールさせるにはどうすればよいですか？

Question

私はdivの2つを互いに独立してスクロールさせる方法を見つけようとしています。ここに私がこれまで持っているものを示す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ページコンテナ」の下部と上部にスクロールすると、それは動きますがありません".livebar"の位置には影響しません。

「.livebar」divが「.site-page-container」divとは独立してスクロールし、どのような影響も与えないようにするにはどうすればよいですか？

Answer 1

右のスクロールバーが実際には親要素のスクロールバー（両方のdivに適用される）なので、問題があると思います。

は、サイトのページ-コンテナクラスにbodyタグと

overflow:scroll 

に

を

overflow:hidden 

を与えて試してみてください