web-dev-qa-db-fra.com

Empêcher le défilement de CordovaView dans Cordova pour Windows Phone 8

Dans une application Cordova pour Windows Phone 8, je peux cliquer et faire glisser horizontalement dans l'application, puis faire un panoramique/défilement au-delà du bord horizontal de l'écran. Voir l'application de modèle autonome Cordova Windows Phone 8:

Panning horizontally past the Edge of the Cordova app

Le code HTML derrière ce modèle d'application possède une spécification de fenêtre d'affichage appropriée, pour autant que je sache:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Ce bogue empêche la détection de tout type de geste par balayage. Le contrôle UIScrollView iOS a une propriété bounces qui permet d’annuler un effet quelque peu similaire.

Est-ce un bug de Cordova? Existe-t-il un paramètre pouvant être placé sur le conteneur du WebBrowser Cordova de sorte que ce panoramique ne puisse pas se produire?

cordovawindows-phone-8windows-phone
19
Jon Gauthier

Deux propriétés CSS supplémentaires sur la balise body ont corrigé le problème de panoramique dans l'application de modèle autonome et dans l'application d'origine sur laquelle je travaillais:

body {
  overflow: hidden;
  -ms-content-zooming: none; }

Cette propriété ms-content-zooming n'empêche pas le défilement vertical au sein d'éléments qui sont des enfants de l'élément body.

19
Jon Gauthier

veuillez utiliser ceci dans la balise body de votre code HTML ... J'ai corrigé les effets de rebond et d'élastique.

 backface-visibility:hidden;
-webkit-backface-visibility:hidden;
 overflow: hidden;
-ms-content-zooming: none;
-ms-touch-action:none;
15
Nitor Mobile Team

C'est une solution vraiment efficace:

 <style>
    html {
        -ms-touch-action: pan-x;
        touch-action: pan-x;
    }

    body {
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -ms-content-zooming: none;
    }
</style>

Cela suppose que votre application ne dispose pas du défilement horizontal (contrairement aux applications hybrides de type natif).

10
Adaptabi

Vous pouvez ajouter le code suivant dans le fichier MainPage.xaml.cs:

    // Constructor
    public MainPage()
    {
        InitializeComponent();
        .... // some default initialization code was here
        // and disable bouncy scrolling option:
        this.CordovaView.DisableBouncyScrolling = true;
    }
8
TSV

La bonne réponse consiste à ajouter this.CordovaView.DisableBouncyScrolling = true; à votre fichier MainPage.xaml.cs, mais dans ce cas, vous ne pouvez pas l'utiliser pour Adobe Phonegap Build car ce fichier xaml ne peut pas être soumis.

3
andreszs

corps {-ms-touch-action: none; }

2
purplecabbage

Nous avons utilisé position absolue sur l'emballage principal et cela a corrigé notre cas d'utilisation.

1
Daniel

cela a résolu mon problème avec phonegap:

if (navigator.userAgent.match(/IEMobile/))
    {
        var ieBodyHeight = $("body").outerHeight();
        var ieBodyHeightNew = ieBodyHeight - 55;
        $("head").append('<meta name="viewport" content="height=' + ieBodyHeightNew + '" />');
    }
0
Madde