parend div scroller来控制子div滚动活动

Question

如何使用父div滚动条控制子div滚动

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

参考上面的代码进行演示。 我需要做的是，我想禁用子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;