Skip to content

Instantly share code, notes, and snippets.

@amolk
Last active June 4, 2023 08:38
Show Gist options
  • Star 65 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save amolk/1599412 to your computer and use it in GitHub Desktop.
Save amolk/1599412 to your computer and use it in GitHub Desktop.
Remove rubberband scrolling from web apps on mobile safari (iOS)
<!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>
@icyz
Copy link

icyz commented Jul 28, 2022

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