title: Momentum scrolling on iOS (-webkit-overflow-scrolling) takes everything else with it
body: <p>I'm using the technique in <a href="http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/" rel="nofollow">this article</a> to add momentum/intertia scrolling to an element.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;h1&gt;My title&lt;/h1&gt;
  &lt;div class="container"&gt;
    &lt;div class="cause"&gt;
      &lt;div class="cause-content"&gt;
        &lt;h2&gt;things&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cause"&gt;
      &lt;div class="cause-content"&gt;
        &lt;h2&gt;things&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
      &lt;div class="cause"&gt;
      &lt;div class="cause-content"&gt;
        &lt;h2&gt;things&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cause"&gt;
      &lt;div class="cause-content"&gt;
        &lt;h2&gt;things&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;  
    &lt;div class="cause"&gt;
      &lt;div class="cause-content"&gt;
        &lt;h2&gt;things&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;  
    &lt;div class="cause"&gt;
      &lt;div class="cause-content"&gt;
        &lt;h2&gt;things&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;  
    &lt;div class="cause"&gt;
      &lt;div class="cause-content"&gt;
        &lt;h2&gt;things&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;  
    &lt;div class="cause"&gt;
      &lt;div class="cause-content"&gt;
        &lt;h2&gt;things&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
    overflow: hidden;
  }
  
  .container{
    margin-top: 5em;
    overflow-x: scroll;
    white-space: nowrap;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }
  
  .cause{
    /* prettify */
    background: blue;
    color: white;
    text-align:center;
  
    /* real shit */
    display: inline-block;
    width: 260px
  }
  </code></pre>
  
  <p>This works, but the problem is that it takes other elements with it! My title scrolls off with it. This happens even if I add <code>position: fixed</code> (probably because fixed isn't fully supported on iOS Safari.</p>
  
  <p>Does anybody know of a way to get inertia scrolling working while still jeeping the other elements in the right place?</p>