Last active
May 8, 2024 17:47
-
-
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> |
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
You can verify this on RyderCragie.com where the search bar and share button is.