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

4
votes

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?

1
javascriptsafariscrollbounce
I know -webkit-overflow-scrolling: touch; enables elastic scrolling...you might try setting it to auto to turn it off. Works on elements which do not have elastic scrolling by default. – Tim Medora
@TimMedora for which control do I apply that property, I tried applying it on my content div, but an error "unknown property name" is shown – anwith.ct
You could try applying it to the whole body element in your CSS...I don't know if that will work or not; just thought I would mention it. What might be more likely to work is to hide the overflow of the body, and add another element with overflow:auto. Only the body's scroll is elastic by default; the new element should scroll with no bounce. – Tim Medora
@TimMedora Tim, That idea will work for Safari on OS-X but not on ios(touch devices), overflow:hidden on body element has no effect on ios, have tried it. – anwith.ct

1 Answers

1
votes

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