Add option to reset the viewport and prevent page scroll events.

pbakaus · Feb 9, 2012 · eae5bbf · eae5bbf
1 parent 166583e
commit eae5bbf
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -55,6 +55,8 @@ Viewporter is almost zero configuration. There's only one constant to check if V
 
 * viewporter.forceDetection (Boolean) - defaults to false, enabling it will cause the Viewporter not to use its profiles for devices (see devicepixel demo)
 
+* viewporter.preventPageScroll (Boolean) - defaults to false, enabling it will prevent scroll events on the body element. Use this option to cancel iOS overscroll effect, which causes the view to bounce back when scrolling exceeds the bounds. Additionally it will scroll back the pane if the user clicks the page after selecting the address bar on iOS.
+
 ### Constants
 
 * viewporter.ACTIVE - _true_ if the Viewporter is enabled and running (smartphones!), false if not (Desktop, non-touch device)

diff --git a/demo/nopagescroll.html b/demo/nopagescroll.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+	<title>No Page Scroll</title>
+
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+	<!-- This exact meta viewport is required for Viewporter for work properly -->
+	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" />
+
+	<link rel="stylesheet" href="style.css" type="text/css" media="screen">
+
+	<script src="../src/viewporter.js"></script>
+
+
+</head>
+<body>
+<div id="viewporter"><!-- This wrapper element is also required -->
+
+	<div id="checker-bl"><p></p></div>
+	<div id="checker-tr"><p></p></div>
+
+</div>
+
+<script type="text/javascript">
+	viewporter.preventPageScroll = true;
+</script>
+
+</body>
+</html>
diff --git a/src/viewporter.js b/src/viewporter.js
@@ -14,6 +14,9 @@ var viewporter;
 
 		// options
 		forceDetection: false,
+
+		// set to true to prevent page scroll. 
+		preventPageScroll: false,
 
 		// constants
 		ACTIVE: (('ontouchstart' in window) || (/webos/i).test(navigator.userAgent)),
@@ -56,6 +59,22 @@ var viewporter;
 				}
 			}, false);
 
+
+			// prevent page scroll if `preventPageScroll` option was set to `true`
+			document.body.addEventListener('touchmove', function(event) {
+				if (viewporter.preventPageScroll){
+					event.preventDefault();
+				}
+			}, false);
+
+			// reset page scroll if `preventPageScroll` option was set to `true`
+			// this is used after showing the address bar on iOS
+			document.body.addEventListener("touchstart", function() {
+				if (viewporter.preventPageScroll) {
+					that.prepareVisualViewport();
+				}
+			}, false);
+
 		};