web-dev-qa-db-ja.com

Cordova for Windows Phone8でCordovaViewからスクロールアウトしないようにする

Windows Phone 8 Cordovaアプリケーションでは、アプリ内で水平方向にクリックアンドドラッグし、ディスプレイの水平方向の端を越えてパン/スクロールすることができます。 Cordova Windows Phone8スタンドアロンテンプレートアプリケーションを参照してください。

Panning horizontally past the Edge of the Cordova app

このテンプレートアプリケーションの背後にあるHTMLには、私が見る限り、適切なビューポート仕様があります。

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

このバグにより、あらゆる種類のスワイプジェスチャ検出が役に立たなくなります。 iOS UIScrollViewコントロールには bounces property があり、これにより、多少類似した効果をキャンセルできます。

これはCordovaのバグですか？このパンが発生しないように、Cordova WebBrowserのコンテナーに配置できる設定はありますか？

cordovawindows-phone-8windows-phone
19
Jon Gauthier

bodyタグの2つの追加のCSSプロパティにより、スタンドアロンテンプレートアプリと私が取り組んでいた元のアプリの両方でのパンの問題が修正されました。

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

この ms-content-zoomingプロパティは、body要素の子である要素内の垂直スクロールを制限しません。

19
Jon Gauthier

hTMLのbodyタグでこれを使用してください...バウンスとラバーバンドの効果を修正しました。

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

これは本当に機能するソリューションです。

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

これは、アプリに水平スクロールがないことを前提としています（ハイブリッドネイティブのようなアプリにはないはずです）

10
Adaptabi

MainPage.xaml.csファイルに次のコードを追加できます。

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

正解は、MainPage.xaml.csファイルにthis.CordovaView.DisableBouncyScrolling = true;を追加することですが、この場合、このxamlファイルを送信できないため、Adobe PhonegapBuildに使用することはできません。

3
andreszs

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

2
purplecabbage

メインラッパーで絶対位置を使用し、ユースケースを修正しました。

1
Daniel

これにより、phonegapに関する私の問題が解決しました。

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