title: Prevent scroll bounce for the body element, but keep it for child elements in iOS
body: <p>I've been working on a mobile webapp as of late. I'm optimizing mobile-first, focusing specifically on iOS for the iPhone right now. I don't want the precise look of a native app, but I think that the <em>feeling</em> of being native is of absolute importance. I've made the markup and CSS to reflect this idea, leaving me with this (annotated to better understand the problem I'm having later on):</p>
  
  <p><img src="https://i.stack.imgur.com/jrKpV.png" alt="Webapp markup"></p>
  
  <p>This all works problem-free, and it also has the advantage of having a native feel, with static header and footer, and a scrollable inner view (thanks to <code>-webkit-overflow-scrolling: touch</code>).</p>
  
  <p>As anyone who has used iOS for more than 5 minutes will know, when you scroll up or down, you get some nice momentum scrolling. Also, when you hit the top of a list, you get a nice 'bounce' effect:</p>
  
  <p><img src="https://i.stack.imgur.com/oi5CZ.png" alt="List bouncing in Settings.app"></p>
  
  <p>I feel that this helps to define the feeling of iOS, and such a small detail can go a long way. Luckily, when you are below the top of a list in a scrollable element in a webapp, and scroll past the top, you get the same effect. This is the <strong>desired behavior</strong> in action:</p>
  
  <p><img src="https://i.stack.imgur.com/jU48Y.png" alt="Scrolling down and up in a webapp produces this bouncing effect"></p>
  
  <p>However, when you are at the top of the list, and try to recreate the same bouncing behavior a the top of the list (à la Setting.app, seen above), we get the following behavior, which is <strong>not desired</strong>:
  <img src="https://i.stack.imgur.com/yG2ps.png" alt="Scrolling down produces the bouncing effect for the entire chrome of the app"></p>
  
  <p>I've seen some <a href="https://stackoverflow.com/questions/9108599/disabling-ios-elastic-body-scroll-keep-native-scrolling-working">similar</a> <a href="https://stackoverflow.com/questions/9669670/how-to-disable-vertical-bounce-scroll-on-iphone-in-a-mobile-web-application">questions</a> on Stack Overflow, but these all opt for disabling bouncing. I'm wondering if it's at all possible to <strong>keep bouncing, but always make it occur on <code>body section section#main</code>, not on webapp's chrome</strong>. I'm not using jQuery, so I'd prefer answers to be in straight-up JavaScript (bonus points for a CSS solution, though).</p>
  
  <p>Here's a <a href="https://github.com/kylewlacy/planner/tree/so" rel="nofollow noreferrer">GitHub repo</a> with all of the code (Sinatra, HAML, and Sass; current branch is <code>so</code>), or a <a href="http://jsfiddle.net/kylewlacy/gFpQr/" rel="nofollow noreferrer">JSFiddle</a> with broken images and links, but shows the issue in question on an iPhone (best to add to homescreen to test).</p>