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?
Asked
Active
Viewed 2,597 times
4
-
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 M. Mar 08 '13 at 06:41
-
@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 Mar 08 '13 at 09:29
-
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 M. Mar 08 '13 at 09:36
-
@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 Mar 08 '13 at 09:39
1 Answers
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
