Prevent elastic scrolling in ipad/iphone safari, but allow content scroll

Question

I want to disable the bounce effect(elastic scrolling) ipad/iphone safari browser. And tried using preventing default on touchmove but that is preventing the whole scrolling. I want to be able to scroll the content but just prevent the bounce. My header and footer are fixed. An ideas?

Answer 1

With Mobile Safari on iOS8 (AppleWebKit/600) you can detect if scroll bounce occurs at the top (swiping down) using the following:

window.onscroll = function() { if (document.body.scrollTop < 0) { // do something } }

I had a play to see if I could find a clean way to "interrupt" the bounce, but didn't find anything nice.

Note the window.onscroll solution won't work in UIWebView because I think the onscroll event is not fired in UIWebView, however that isn't a problem because UIWebView doesn't have bounce! You can detect if using UIWebView versus WKWebView using https://stackoverflow.com/a/30495399/436776

I was using this code to test (must clone and open fullscreen to test on iOS): http://jsbin.com/tocako/edit