Best IT Recipes

How to prevent the application from hanging on the phone from scrolling vertically?

I'm trying to break the phone, and I want my app to not scroll up and down when the user drags them across the screen with their finger. This is my code. Can someone tell me why it still allows scrolling?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta name = "viewport" content = "user-scalable=no,width=device-width" /> <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />--> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <!-- iPad/iPhone specific css below, add after your main css > <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" /> --> <!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here --> <script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.1.min.js"></script> <script type="text/javascript" charset="utf-8"> // If you want to prevent dragging, uncomment this section /* function preventBehavior(e) { e.preventDefault(); }; document.addEventListener("touchmove", preventBehavior, false); */ /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch. see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html for more details -jm */ /* function handleOpenURL(url) { // TODO: do something with the url passed in. } */ function onBodyLoad() { document.addEventListener("deviceready",onDeviceReady,false); } /* When this function is called, PhoneGap has been initialized and is ready to roll */ /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch. see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html for more details -jm */ function onDeviceReady() { // do your thing! navigator.notification.alert("PhoneGap is working") } touchMove = function(event) { // Prevent scrolling on this element event.preventDefault(); } </script> <style> #container { width:100%; height:100%; } </style> </head> <body onload="onBodyLoad()"> <div id="container" ontouchmove="touchMove(event);"> </div> </body> </html>
+49
ios iphone cordova
May 31 '11 at 20:13
source share
14 answers

if you are using Cordova 2.3.0 + find config.xml and add this line:

<preference name="UIWebViewBounce" value="false" />

or in Cordoba 2.6.0 +:

<preference name="DisallowOverscroll" value="true" />

+83
Jan 14 '13 at 19:31
source share

Run this code when the page is loaded to disable drag and drop:

 document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);

Here is an example with jQuery:

 $(document).ready(function() { document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false); });
+32
Jun 08 2018-11-22T00:
source share

if you are using Cordova 2.6.0 + , find config.xml, just add / change this line:

<preference name="DisallowOverscroll" value="true" />

+10
Apr 23 '13 at 13:19
source share

in your configuration file use

 <preference name="webviewbounce" value="false" /> <preference name="DisallowOverscroll" value="true" />
+8
Jul 10 '15 at 9:42
source share

You did not say that this is a native application or a web application.

If this is a native application, you can disable scrolling in a web browser

 UIScrollView* scroll; // for(UIView* theWebSubView in self.webView.subviews){ // where self.webView is the webview you want to stop scrolling. if([theWebSubView isKindOfClass:[UIScrollView class] ]){ scroll = (UIScrollView*) theWebSubView; scroll.scrollEnabled = false; scroll.bounces = false; } }

Otherwise, this is a link to the wiki for telephone firmware to prevent scrolling. http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications

+6
May 31 '11 at 21:24
source share

Add the following entry to the config.xml file:

 <preference name="DisallowOverscroll" value="true" />
+4
Aug 16 '13 at 20:45
source share

For me, this works great when I use the body selector with jquery. Otherwise, I could not open external links using Phonegap.

 $('body').on('touchmove', function(evt) { evt.preventDefault(); })
+2
Nov 14 '12 at 8:33
source share

Changed UIWebViewBounce for DisallowOverscroll to 2.6.0

+2
Apr 13 '13 at 18:48
source share

In the config.xml of your project, in the settings for iOS, set DisallowOverscroll to true. By default, it is false, which makes the entire scroll view along with the internal elements of the view.

 <preference name="DisallowOverscroll" value="true" />
+2
May 2 '14 at 5:38
source share

Go to native and add this line to the AppDelegate.m file

 self.viewController.webView.scrollView.scrollEnabled = false;

Drop it into the application application (BOOL): (UIApplication) doneFinishLaunchingWithOptions * .

+2
Apr 29 '15 at 16:34
source share

now you just need to put <preference name="DisallowOverscroll" value="false" /> in <preference name="DisallowOverscroll" value="true" /> in the config.xml file.

+1
May 1, '13 at 15:40
source share

First you need to add an event listener to the body unload method.

just put this line in the touch move method.

it will not scroll document.addEventListener ("touchstart / TouchMove / touchend"). Any of these 3.

 function touchMove (event e) { e.preventDefault; }
0
May 31 '12 at 12:04
source share

If the UIWebViewBounce is set to NO in your .plist file.

Then, using plain css, the content will not scroll. Try adding this overflow style : hidden in your div where you want to disable scrolling.

0
Feb 20 '13 at 13:15
source share

In the config.xml of your project, in the settings for iOS, set DisallowOverscroll to true.

0
Aug 26 '14 at 11:45
source share


More articles:


All Articles