Question

我有一个问题，我无法解决自己。我想在第一个div中禁用滚动，但仍然可以在第二个div中滚动。所以第一个div（蓝色的一个）被锁定并保持全高，而不能滚动。

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

我确实试过给位置：固定到蓝色div但它搞砸了我的页面所以我删除了它。

请帮我解决这个问题并查看下面的代码：

谢谢

＆＃13;

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

＆＃13;

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

＆＃13;

谢谢！

Answer 1

我不确定你在问什么，你的意思是这样吗

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

你需要定义高度（因此它小于内容）滚动功能才能启动，否则它只占用100％并忽略溢出css

css禁用div中的滚动

1 个答案: