title: parend div scroller to control child div scrolling activity
body: <p>How to controll child div scrolling with parent div scrollbar</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='answerform'&gt;
    &lt;div class="clsHeader"&gt;Header&lt;/div&gt;
    &lt;div class="clsText"&gt;
      badger&lt;br /&gt;badger&lt;br /&gt;badger&lt;br /&gt;badger&lt;br /&gt;badger&lt;br /&gt;
      badger&lt;br /&gt;badger&lt;br /&gt;badger&lt;br /&gt;badger&lt;br /&gt;badger&lt;br /&gt;
      badger&lt;br /&gt;badger&lt;br /&gt;badger&lt;br /&gt;badger&lt;br /&gt;badger&lt;br /&gt;
      badger&lt;br /&gt;badger&lt;br /&gt;badger&lt;br /&gt;
    &lt;/div&gt;
    &lt;div class="clsHeader"&gt;Header&lt;/div&gt;
    &lt;div class="clsText"&gt;
      badger
    &lt;/div&gt;
    &lt;div class="clsHeader"&gt;Header&lt;/div&gt;
    &lt;div class="clsText"&gt;
      badger
    &lt;/div&gt;
    &lt;div class="clsHeader"&gt;Header&lt;/div&gt;
    &lt;div class="clsText"&gt;
      badger
    &lt;/div&gt;   
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>refer the above code for demo.
  What I need to do is, I want to disable the child div scrollbar but not the functionality of child div scrolling. so when the parent scrollbar is moved, the child div scrolling activity will take place, once the child div is scrolled completely, second child div scrolling will start and so on..</p>