Skip to content

Instantly share code, notes, and snippets.

@amolk

amolk/remove-rubber-band-web-apps-ios

Last active May 8, 2024 17:47
Show Gist options
  • Save amolk/1599412 to your computer and use it in GitHub Desktop.
Save amolk/1599412 to your computer and use it in GitHub Desktop.
Download ZIP
Remove rubberband scrolling from web apps on mobile safari (iOS)
Raw
remove-rubber-band-web-apps-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>
@andre-fuchs
Copy link

How about

body {
  position: fixed;
}

does that work too?

Worked for me! Thanks.

@Ross-Hunter
Copy link

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.

@lotusorrose
Copy link

thank you!

@RyderCragie
Copy link

@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.

@RyderCragie
Copy link

RyderCragie commented Mar 10, 2022 •
edited
Loading

You can verify this on RyderCragie.com where the search bar and share button is.

@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