StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPrevent scroll bounce for the body element, but keep it for child elements in iOS
text
Body
copied!<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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload