Last active
June 4, 2023 08:38
-
-
Save amolk/1599412 to your computer and use it in GitHub Desktop.
Remove rubberband scrolling from web apps on mobile safari (iOS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?