wake-up-neo.com

Scrollen aus CordovaView in Cordova für Windows Phone 8 verhindern

In einer Windows Phone 8 Cordova-Anwendung kann ich in der App horizontal klicken und ziehen und über den horizontalen Rand der Anzeige schwenken/scrollen. Weitere Informationen finden Sie in der eigenständigen Vorlagenanwendung für Cordova Windows Phone 8:

Panning horizontally past the Edge of the Cordova app

Der HTML-Code hinter dieser Vorlagenanwendung hat eine ordnungsgemäße Ansichtsfenster-Spezifikation, soweit ich 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 Fehler verhindert, dass irgendeine Art von Wischgestenerkennung nützlich ist. Das iOS-UIScrollView-Steuerelement verfügt über eine bounces -Eigenschaft , mit der ein ähnlicher Effekt abgebrochen werden kann.

Ist das ein Cordova-Fehler? Gibt es eine Einstellung, die für den Container des Cordova WebBrowsers festgelegt werden kann, sodass dieses Schwenken nicht möglich ist?

19
Jon Gauthier

Zwei zusätzliche CSS-Eigenschaften für das Tag body haben das Schwenkproblem sowohl in der eigenständigen Vorlagen-App als auch in der ursprünglichen App, an der ich gearbeitet habe, behoben:

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

Diese ms-content-zooming -Eigenschaft schränkt das vertikale Scrollen in Elementen, die untergeordnet zum body -Element sind, nicht ein.

19
Jon Gauthier

bitte benutze dies im Body-Tag deines HTML ... Ich habe die Bouncing- und Gummiband-Effekte korrigiert.

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

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>

Dies setzt voraus, dass Ihre App kein horizontales Scrollen hat (was Hybrid-Apps wie native Apps nicht haben sollten).

10
Adaptabi

Sie können den folgenden Code in die Datei MainPage.xaml.cs einfügen:

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

Die richtige Antwort ist das Hinzufügen von this.CordovaView.DisableBouncyScrolling = true; zu Ihrer MainPage.xaml.cs-Datei. In diesem Fall können Sie sie jedoch nicht für Adobe Phonegap Build verwenden, da diese xaml-Datei nicht gesendet werden kann.

3
andreszs

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

2
purplecabbage

Wir haben die absolute Position auf dem Haupt-Wrapper verwendet und sie hat unseren Anwendungsfall behoben.

1
Daniel

das hat mein problem mit phonegap gelöst:

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