How to prevent app running in phone-gap from scrolling vertically?
IphoneIosCordovaIphone Problem Overview
I'm trying out phone gap and I want my application to not scroll up and down when the user drags their finger across the screen. This is my code. Can anyone tell me why it's still allowing 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>
Iphone Solutions
Solution 1 - Iphone
if you're using Cordova 2.3.0+ find config.xml and add this line:
<preference name="UIWebViewBounce" value="false" />
or in Cordova 2.6.0+:
<preference name="DisallowOverscroll" value="true" />
Solution 2 - Iphone
Run this code when the page is loaded to disable dragging:
document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
Here's an example with jQuery:
$(document).ready(function() {
document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
});
Solution 3 - Iphone
in your config file use
<preference name="webviewbounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
Solution 4 - Iphone
if you're using Cordova 2.6.0+ find config.xml, just add/modify this line:
><preference name="DisallowOverscroll" value="true" />
Solution 5 - Iphone
Add the following entry to config.xml file:
<preference name="DisallowOverscroll" value="true" />
Solution 6 - Iphone
You didn't say if this is a native app or a web app.
If this is a native app you can turn off scrolling on the webview
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 here is a link on the phonegap wiki for preventing scrolling. http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications
Solution 7 - Iphone
In config.xml of your project, under preferences for iOS set DisallowOverscroll to true. By default it is false which makes whole view to scroll along with inner elements of the view.
<preference name="DisallowOverscroll" value="true" />
Solution 8 - Iphone
For me it work's perfect, when i use the body-selector with jquery. Otherwise i was not able to open external links with Phonegap.
$('body').on('touchmove', function(evt) {
evt.preventDefault();
})
Solution 9 - Iphone
Changed UIWebViewBounce to DisallowOverscroll in 2.6.0
Solution 10 - Iphone
now you just have to put <preference name="DisallowOverscroll" value="false" /> to <preference name="DisallowOverscroll" value="true" /> in your config.xml file.
Solution 11 - Iphone
Go native and add this line to the AppDelegate.m file
self.viewController.webView.scrollView.scrollEnabled = false;
Drop it in the - (BOOL)application:(UIApplication)application didFinishLaunchingWithOptions* section.
Solution 12 - Iphone
At first what you have to do is you should add the event listener in body unload method.
simply put this line in the touch move method.
it won't scroll document.addEventListener("touchstart/touchmove/touchend"). Any one of these 3.
function touchMove (event e) {
e.preventDefault;
}
Solution 13 - Iphone
If you have UIWebViewBounce to NO in your .plist file.
Then with simple css would make the content not scrollable. Try Adding this style overflow : hidden in your div where you want to disable the scroll.
Solution 14 - Iphone
In config.xml of your project, under preferences for iOS set DisallowOverscroll to true.