web-dev-qa-db-fra.com

Comment empêcher une application s'exécutant dans Phone-Gap de défiler verticalement?

J'essaie d'écarter le téléphone et je veux que mon application ne défile pas de haut en bas lorsque l'utilisateur fait glisser son doigt sur l'écran. Ceci est mon code. Quelqu'un peut-il me dire pourquoi il autorise toujours le défilement?

   <!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>
iphoneioscordova
57
Casey Flynn

si vous utilisez Cordova 2.3.0+ trouvez config.xml et ajoutez cette ligne:

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

ou dans Cordova 2.6.0+:

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

88
gregmatys

Exécutez ce code lorsque la page est chargée pour désactiver le glissement:

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

Voici un exemple avec jQuery:

$(document).ready(function() {
    document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
});
35
Felipe Brahm

dans l'utilisation de votre fichier de configuration

<preference name="webviewbounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
18
Reyraa

si vous utilisez Cordova 2.6.0 + trouvez config.xml, ajoutez/modifiez simplement cette ligne:

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

10
Spawnrider

Ajoutez l'entrée suivante au fichier config.xml:

<preference name="DisallowOverscroll" value="true" />
5
Ravindranath Akila

Vous n'avez pas dit s'il s'agit d'une application native ou d'une application Web.

S'il s'agit d'une application native, vous pouvez désactiver le défilement sur la vue Web

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;
    }
}

sinon, voici un lien sur le wiki phonegap pour empêcher le défilement. http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications

4
zingle-dingle

Dans config.xml de votre projet, sous les préférences pour iOS, définissez DisallowOverscroll sur true. Par défaut, il est faux, ce qui fait défiler la vue entière avec les éléments internes de la vue.

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

UIWebViewBounce changé en DisallowOverscroll dans 2.6.0

2
k2fx

Pour moi, cela fonctionne parfaitement lorsque j'utilise le sélecteur de corps avec jquery. Sinon, je n'ai pas pu ouvrir de liens externes avec Phonegap.

$('body').on('touchmove', function(evt) {
    evt.preventDefault(); 
})
2
volf

Passez en mode natif et ajoutez cette ligne au fichier AppDelegate.m

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

Déposez-le dans l'application - (BOOL): (UIApplication ) didFinishLaunchingWithOptions *.

2
Chris Lambrou

il ne vous reste plus qu'à mettre <preference name="DisallowOverscroll" value="false" /> à <preference name="DisallowOverscroll" value="true" /> dans votre fichier config.xml.

1
seb

Dans config.xml de votre projet, sous les préférences pour iOS, définissez DisallowOverscroll sur true.

0
user3978833

Au début, vous devez ajouter l'écouteur d'événements dans la méthode de déchargement du corps.

il suffit de mettre cette ligne dans la méthode tactile.

il ne fera pas défiler document.addEventListener ("touchstart/touchmove/touchend"). N'importe lequel de ces 3.

function touchMove (event e) {
    e.preventDefault;
}
0
Bharath

Si vous avez UIWebViewBounce sur NO dans votre fichier .plist.

Ensuite, avec un simple CSS, le contenu ne pourrait pas défiler. Essayez d'ajouter ce style débordement: caché dans votre div où vous souhaitez désactiver le défilement.

0
Revathy Durairajan