Permalink
Browse files

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

  • Loading branch information...
1 parent 166583e commit eae5bbf1b0f2ce2b35c51df61131f046a7dc8b3c @aemkei aemkei committed Feb 9, 2012
Showing with 54 additions and 0 deletions.
  1. +2 −0 README.md
  2. +33 −0 demo/nopagescroll.html
  3. +19 −0 src/viewporter.js
View
@@ -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)
View
@@ -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>
View
@@ -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);
+
};

0 comments on commit eae5bbf

Please sign in to comment.