css禁用div中的滚动

Question

我有一个无法解决的问题。我想在第一个 div 中禁用滚动，但仍然可以在第二个 div 中滚动。所以第一个 div(蓝色的)被锁定并保持完整高度而无法滚动。

当你用鼠标滚动时，你应该能够继续滚动，但只能在第二个中滚动。

我确实尝试将 position:fixed 赋予蓝色 div，但它弄乱了我的页面，所以我将其删除。

请帮我解决这个问题，看看我下面的代码:

谢谢

.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>

谢谢!

Answer 1

我不知道你在问什么，你的意思是这样的吗

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

您需要定义滚动功能的高度(因此它小于内容)，否则它只会占用 100% 并忽略溢出 css