Как я могу сделать два div в одном и том же родительском контейнере независимо друг от друга?

Question

Я пытаюсь выяснить, как заставить два моих divs прокручиваться независимо друг от друга. Вот 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; 
} 

При перемещении к нижней и верхней части ".Выходные-страницы-контейнера", это движение делает не влияют на положение «.livebar».

Как я могу сделать так, чтобы div «.livebar» прокручивался независимо от div «.site-page-container» и никак не повлиял на него?

Answer 1

Я думаю, проблема заключается в том, что полоса прокрутки справа представляет собой полосу прокрутки родительского элемента (которая применяется как к div).

Try давая

overflow:hidden 

для тела тега и

overflow:scroll 

на сайт-страницу-контейнер класса