title: Prevent body scrolling when the user scrolls on fixed position div
body: <p>On mobile devices when a <code>position:fixed;</code> element appears on the screen the user can scroll the <code>&lt;body&gt;</code>, through the fixed element.</p>
  
  <pre><code>body,
  html{
      overflow: hidden;
      margin: 0;
      padding: 0;
  }
  
  #fixed {
      background: red;
      position: fixed;
      left:0;
      top: 0;
      width: 200px;
      height: 100%;
  }
  
  #content {
      background: blue;
      height: 3000px;
  }
  </code></pre>
  
  <p>I tried to add <code>overflow:hidden</code> for <code>&lt;html&gt;</code> and <code>&lt;body&gt;</code> but it didn't help. I would like to prevent scrolling through the fixed element, but I would like to allow the scroll, when the fixed element is visible, but the user scrolls on <code>&lt;body&gt;</code>.</p>
  
  <p>I tried this with ios and android devices. What is the best solution to solve this?</p>