Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save deepakkoirala/1a50f6d857c8dcc00dfe8435fa0db607 to your computer and use it in GitHub Desktop.
Save deepakkoirala/1a50f6d857c8dcc00dfe8435fa0db607 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment