css disable scrolling in div

Question

I have a question that I cannot fix myself. I want to disable scrolling in the first div but still be able to scroll in the second div. So the first div (the blue one) is locked and keeps full height without being able to scroll.

When u scroll with your mouse u should be able to continue scrolling but only in the second one.

I did try giving position:fixed to the blue div but it messed up my page so I removed it.

Please help me fix this problem and take a look at my code below:

Thank you

.blue {
    background-color: #92d2fc;
    background-image: url(../images/icons/idea.svg);
    background-size:24vw;
}


.gallery {
    height:100vh;
}

/*--- grid gallery/discription ----*/
.left {
    float: left;
    width: 35%;
    height:100vh;
}
.right {
    float: left;
    width: 65%;
}
.right img {
    width:100%;
}
.group {
    clear: both;
}
.righttext{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 70px;
    -moz-column-gap: 70px;
    column-gap: 70px;
    width: 65em;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    padding-top:3em;
    padding-bottom:5em;
}







/*media query*/

@media screen and (max-width: 960px) {
    
.left, .right {
        float: none;
        width: auto;
    }
    
img {
    width: 100%;
    height: auto;
	}
    
.righttext {
   width:55em;
   -webkit-column-count: 1; 
   -moz-column-count: 1;   
   column-count: 1;
    
}


@media screen and (max-width: 700px) {
        
.columns {
        width:100%;
    }
.blue {
    background-size:60vw;
    }
.red, .yellow {
    background-size:100vw;
}
.righttext {
    width: 40em;
   -webkit-column-count: 1; 
   -moz-column-count: 1;   
   column-count: 1;
}

@media screen and (max-width: 600px) {
        
h1 {
    width:13em;
  }
    
h2 {
    width: 25em;
}
#intro img {
    width:350px;
    }
.red, .yellow {
    background-size:100vw;

}
}

@media screen and (max-width: 480px) {

.righttext {
    width:25em;
   -webkit-column-count: 1; 
   -moz-column-count: 1;   
   column-count: 1;
}   
}    

@media screen and (max-width: 350px) {

.righttext {
    -webkit-column-count: 1; 
    -moz-column-count: 1;   
    column-count: 1;
    -webkit-column-gap: 0px; 
    -moz-column-gap: 0px; 
    column-gap: 0px;
    width:17em;
}
}
/*-------- einde mediaqueries --------*/

 <div class="group">
        <div class="left">
          <section class="gallery blue">
            <h3>About us</h3>
            <p class="gridtext">How the gym became a reality</p> 
            </section>    
                </div>
        
        <div class="right">
            <img src="http://www.bloovi.be/frontend/files/blog/images/source/google-zet-zijn-zoekresultaten-op-z-n-kop-en-zo-gaat-jouw-bedrijf-dat-voelen.jpg" alt="notagym picture">
            
            <article class="righttext">
             <h4>over de gym</h4>     
             <p>De Creativity Gym is een creative ruimte die werd bedacht en ingericht door drie docenten uit de opleiding Interactive Multimedia Design aan de Thomas More hogeschool te Mechelen. Robby Vanelderen, David Heerinckx en Joris Hens [volgorde foto] besloten de koppen bij elkaar te steken om een leegstaande turnzaal om te bouwen tot de ultieme co-working space waar creatieve developers en designers samenkomen om te werken aan hun projecten.</p></article>
            
            <img src="http://www.bloovi.be/frontend/files/blog/images/source/google-zet-zijn-zoekresultaten-op-z-n-kop-en-zo-gaat-jouw-bedrijf-dat-voelen.jpg" alt="notagym picture">
            
            <article class="righttext">
            <h4 class="rood">ontstaan</h4>     
             <p>Tijdens de zomervakantie - die normaal gezien heilig is in onderwijskringen ;) - werden de handen uit de mouwen gestoken samen met hulpvaardige studenten en medewerkers van de hogeschool. Op 7 september 2013 werd de Gym officieel geopend door algemeen directeur Machteld Verbruggen, burgemeester Bart Somers en internetspecialiste Clo Willaerts. 

             Inspiratie werd zeker en vast geput uit de kantoren van Google, Facebook en andere spelers in Silicon Valley. De Creativity Gym is overdag een werkplek (zeg maar kantoor) voor de studenten Interactive Multimedia Design, maar 's avonds gaan er op regelmatige basis workshops, meetups en andere events door. </p></article>
            
            
        </div>
    
    </div>

Thank you!

Answer 1

I am not sure what you are asking, do you mean something like this

.right {
    height:100vh;
    overflow-y: scroll;
}
.left {
    overflow:hidden;
}

you need to define the height (so its less than contents) for the scroll function to kick in otherwise it just takes up 100% and ignores the overflow css