parend格滾輪來控制孩子的div滾動活動

Question

如何控制好兒童的div滾動與父母DIV滾動條

#answerform 
 
{ 
 
    position: absolute; 
 
    border: 5px solid gray; 
 
    padding: 5px; 
 
    background: white; 
 
    width: 300px; 
 
    height: 400px; 
 
    overflow-y: scroll; 
 
} 
 
.clsHeader 
 
{ 
 
    height:30px; 
 
    width:100%; 
 
    border:1px solid black;  
 
    position: relative; 
 
} 
 
.clsText 
 
{ 
 
    height:250px; 
 
    width:100%; 
 
    border:1px solid black; 
 
    overflow-y: scroll; 
 
    position: relative; 
 
}

<div id='answerform'> 
 
    <div class="clsHeader">Header</div> 
 
    <div class="clsText"> 
 
    badger<br />badger<br />badger<br />badger<br />badger<br /> 
 
    badger<br />badger<br />badger<br />badger<br />badger<br /> 
 
    badger<br />badger<br />badger<br />badger<br />badger<br /> 
 
    badger<br />badger<br />badger<br /> 
 
    </div> 
 
    <div class="clsHeader">Header</div> 
 
    <div class="clsText"> 
 
    badger 
 
    </div> 
 
    <div class="clsHeader">Header</div> 
 
    <div class="clsText"> 
 
    badger 
 
    </div> 
 
    <div class="clsHeader">Header</div> 
 
    <div class="clsText"> 
 
    badger 
 
    </div> 
 
</div>

是指用於演示上面的代碼。 我需要做的是，我想禁用子div滾動條，但不是子div滾動的功能。所以當父滾動條移動時，孩子的div滾動活動將採取地方，一旦孩子的div完全滾動，第二個孩子的div滾動將啓動等..

Answer 1

添加以下的風格也 -

.clsText{ 
    ... 
padding-right: 20px; 
margin-right: -20px; 
} 

#answerform{ 
    .... 

    overflow-x: hidden; 
} 

---

#answerform 
 
{ 
 
    position: absolute; 
 
    border: 5px solid gray; 
 
    padding: 5px; 
 
    background: white; 
 
    width: 300px; 
 
    height: 400px; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
} 
 
.clsHeader 
 
{ 
 
height:30px; 
 
width:100%; 
 
border:1px solid black;  
 
    position: relative; 
 
} 
 
.clsText 
 
{ 
 
height:250px; 
 
width:100%; 
 
border:1px solid black; 
 
overflow-y: scroll; 
 
    position: relative; 
 
padding-right: 20px; 
 
margin-right: -20px; 
 
}

<div id='answerform'> 
 
    <div class="clsHeader">Header</div> 
 
     <div class="clsText"> 
 
     badger<br />badger<br />badger<br />badger<br />badger<br /> 
 
     badger<br />badger<br />badger<br />badger<br />badger<br /> 
 
     badger<br />badger<br />badger<br />badger<br />badger<br /> 
 
     badger<br />badger<br />badger<br /> 
 
     badger<br />badger<br />badger<br />badger<br />badger<br /> 
 
     badger<br />badger<br />badger<br />badger<br />badger<br /> 
 
     badger<br />badger<br />badger<br />badger<br />badger<br /> 
 
     badger<br />badger<br />badger<br /> 
 
     </div> 
 
    <div class="clsHeader">Header</div> 
 
     <div class="clsText"> 
 
     badger 
 
     </div> 
 
    <div class="clsHeader">Header</div> 
 
     <div class="clsText"> 
 
     badger 
 
     </div> 
 
    <div class="clsHeader">Header</div> 
 
     <div class="clsText"> 
 
     badger 
 
     </div> 
 
</div>

Answer 2

.clsText對於，改變overflow-y: scroll;到overflow-y: auto;