title: Prevent underlying div from scrolling in iOS Safari
body: <p>I have a <code>div</code> that is 100% height, 70% viewport height, and <code>overflow:scroll</code>.</p>
  
  <p>Now I want to create an overlaying <code>div</code> which touch devices can use to scroll the whole page instead of the <code>div</code>. </p>
  
  <p><img src="https://i.stack.imgur.com/c8aRw.png" alt=""></p>
  
  <p>I created a <code>div</code> with <code>position:absolute</code> and full page height. If Android users drag on this <code>div</code>, the whole page scrolls, like expected. However, on iOS7 the underlying <code>div</code> is scrolled, like the touch event goes right trough the <code>div</code>.</p>
  
  <p><a href="http://jsfiddle.net/Ag7e2/4/" rel="noreferrer">JSFiddle</a></p>
  
  <pre><code>.scrollDiv{
      width:100%;
      height:200px;
      overflow-y:scroll;
      border:solid 1px #f00;
      -webkit-overflow-scrolling: touch;
  }
  .pageScroller{
      position:absolute;
      right:0;
      top:0;
      bottom:0;
      width:50%;
      background-color: rgba(0,0,0,0.7);
  }
  </code></pre>
  
  <p>If you use iOS7 and drag on the page <code>div</code> over the scrolling <code>div</code>, the scrolling <code>div</code> is scrolled instead of the page.</p>
  
  <p>Does anybody know a solution for this?</p>