at max right scroll >— hide right part not left part

Question

I want do to a simple thing : I have a two scrolls website, and I want to hide the right part when the scroll is at the maximum on the right part. SO I used

document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.offsetHeigh...

but the right part is hidden when the scroll is at his max on left part. How Can I do ?

the code pen with the precise problem : https://codepen.io/marie-fran-oise-talbot/pen/LKeqBE

thank youuuuu

Answer 1

There is No need of js. You have to create a main div with fixed height and overflow hidden. Here is a working demo : https://codepen.io/anon/pen/ydpwNZ

.main{
  overflow:hidden;
  height:300px
}
.txt{
  width: 50%;
  overflow-y:scroll;
  height:100%;
  float:left;
}

.background{
  background-color:  #EAECEE;
  width:30%;
  overflow-y:scroll;
  height:100%;
}