Verhindern des Scrollens von CordovaView in Cordova für Windows Phone 8

In einer Windows Phone 8 Cordova-Anwendung, die ich bin in der Lage, klicken und ziehen Sie horizontal in die app und pan/scroll vorbei an den horizontalen Rand des Displays. Finden Sie die Cordova-Windows Phone 8-standalone-template-Anwendung:

Verhindern des Scrollens von CordovaView in Cordova für Windows Phone 8

Den HTML hinter dieser Vorlage Anwendung hat eine richtige viewport-Spezifikation, so weit ich das sehen kann:

<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" />

Dieser bug verhindert, dass jede Art von wischen-Geste-Erkennung aus, nützlich zu sein. Die iOS-UIScrollView Kontrolle hat hüpft Eigenschaft , ermöglicht eine etwas ähnliche Wirkung abgebrochen werden.

Ist dies eine Cordova-bug? Gibt es irgendeine Einstellung, die platziert werden können auf den container, der die Cordova-WebBrowser, so dass dieses panning kann nicht passieren?

InformationsquelleAutor der Frage Jon Gauthier | 2013-02-28

  1. 19

    Zwei zusätzliche CSS-Eigenschaften auf die body tag behoben, durch das panning-problem sowohl in der standalone-template-app und die original-app war ich arbeiten:

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

    Diese ms-content-zooming Eigenschaft nicht einschränken vertikalen Bildlauf innerhalb der Elemente, die untergeordnete Elemente der body element.

    InformationsquelleAutor der Antwort Jon Gauthier

  2. 15

    bitte benutzen Sie dieses in den body-tag Ihres HTML-Codes...ich habe die Feste Prellen und Gummiband-Effekte.

     backface-visibility:hidden;
-webkit-backface-visibility:hidden;
 overflow: hidden;
-ms-content-zooming: none;
-ms-touch-action:none;

    InformationsquelleAutor der Antwort Nitor Mobile Team

  3. 10

    Dies ist eine wirklich funktionierende Lösung:

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

    Diese davon ausgegangen, dass die app nicht horizontal scrollen (die hybrid -, native-like apps nicht haben sollte)

    InformationsquelleAutor der Antwort Adaptabi

  4. 8

    Können Sie fügen Sie den folgenden code in der MainPage.xaml.cs-Datei:

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

    InformationsquelleAutor der Antwort TSV

  5. 3

    Die richtige Antwort ist hinzufügen this.CordovaView.DisableBouncyScrolling = true; auf Ihrer Hauptseite.xaml.cs-Datei, aber in diesem Fall, Sie können nicht es verwenden, für Adobe Phonegap Build als diese xaml-Datei kann nicht gesendet werden.

    InformationsquelleAutor der Antwort andreszs

  6. 2

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

    InformationsquelleAutor der Antwort purplecabbage

  7. 1

    Wir verwendet, position absolute auf der main-wrapper und es Feste unseren Anwendungsfall.

    InformationsquelleAutor der Antwort Daniel

  8. 0

    dies löste mein problem mit phonegap:

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

    InformationsquelleAutor der Antwort Madde

Schreibe einen Kommentar