Menu
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>
586
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" />
141
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);
});
in your config file use
<preference name="webviewbounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
if you're using Cordova 2.6.0+ find config.xml, just add/modify this line:
<preference name="DisallowOverscroll" value="true" />
10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
