-
-
Save amolk/1599412 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Remove rubberband scrolling from web apps on mobile safari (iOS)</title> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="apple-touch-fullscreen" content="yes"> | |
| <meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> | |
| <style> | |
| html, body {margin: 0; padding: 0; overflow: hidden} | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| document.body.addEventListener('touchmove', function(event) { | |
| event.preventDefault(); | |
| }, { | |
| passive: false, | |
| useCapture: false | |
| }); | |
| window.onresize = function() { | |
| $(document.body).width(window.innerWidth).height(window.innerHeight); | |
| } | |
| $(function() { | |
| window.onresize(); | |
| }); | |
| </script> | |
| Try pulling down this page with touch in iPhone/iPad, nothing happens! No rubberband scroll. | |
| </body> | |
| </html> |
Thanks a lot, @mikebarnhardt - this works great in portrait mode at all times, and it also works in landscape mode, but until I press somewhere near the upper or lower end of the page so that the address bar appears. As long as the bar is visible, I can scroll the page. Once the bar has disappeared, the page is fixed again. This can result in a problem when the bar disappears when the page is scrolled partly out of the visible area. Then only the remainder of the page is visible.
In the original solution, this was not the case and the page was steadily fixed even when the address bar had appeared. Somehow there must be a difference between your solution and what the JQuery function does. Do you know what could be the difference?
How about
body { position: fixed; }does that work too?
Worked for me! Thanks.
How about
body { position: fixed; }does that work too?
Worked for me! Thanks.
This works for me as well. Try this first as it's way way simpler than the alternatives.
thank you!
@mikebarnhardt, that stopped me from being able to scroll through the iframe, but now none of the page scrolls when you move your finger over the iframe.
I don't want the iframe to scroll, but I want the page to scroll.
You can verify this on RyderCragie.com where the search bar and share button is.
I tried lots of different approaches, but this was the thing that really worked: https://github.com/lazd/iNoBounce
this is the real working solution
@fredlcore
Something like this might work.
Obviously the
deferattribute should prevent this code from running until the page load finishes, but I left a link in there if you really need to test for it ordeferisn't supported.