19

タッチパンを使用するSurfaceWebアプリがあり（コンテナーdivには「オーバーフロー：自動」スタイルがあります）、組み込みのページングスクロールスタイルを使用しています。

-ms-scroll-snap-points-x: snapInterval(0px, 1366px);
-ms-scroll-snap-type: mandatory;

私のアプリには300％幅の子コンテナーがあり、3ページがページ境界にスナップします。

これは、ユーザーが最初のページにいて右にスワイプする場合を除いて、高性能のページングスクロールに最適です。これにより、ブラウザーの組み込みの戻るジェスチャがアクティブになり、Webアプリが終了して、ユーザーのIE10履歴に移動します。

次を使用して、戻るジェスチャーを無効にすることができます。

-ms-touch-action: none;

ただし、これによりタッチスクロールも無効になるため、ページをドラッグできなくなります。私が使用する場合：

-ms-touch-action: pan-x;

その後、スクロールは再び機能しますが、ブラウザの戻るジェスチャが再び表示されます。これは、非常に煩わしいユーザーエクスペリエンスです。パンを許可するが履歴ジェスチャを許可しない方法はありますか？

4

5 に答える 5

11

解決策は簡単です。スクロールの制限に達した子要素から親要素（スクロールが最終的にトップレベルの履歴ナビゲーションに変わる）へのスクロール動作を防ぐCSSスタイルを追加する必要があります。

ドキュメント（http://msdn.microsoft.com/en-us/library/windows/apps/hh466007.aspx）には、デフォルトは次のように記載されています。

-ms-scroll-chaining: none;

ただし、デフォルトは実際には次のように見えます。

-ms-scroll-chaining: chained;

私はそのスタイルをデフォルトでnoneに設定し、実際にチェーンする必要があるカルーセルの要素にチェーンしました。これにより、アプリの履歴ナビゲーションジェスチャが無効になりました。

* {
    -ms-scroll-chaining: none;
}

.carousel * {
    -ms-scroll-chaining: chained;
}
于 2012-12-04T18:06:10.670 に答える
8

-ms-touch-action: none;すべての要素を設定する必要があります。

これにより、代わりにJavaScriptハンドラー（存在する場合）に対してイベントが発生しますが、パン、ズーム、スライドなどのすべての新しいアクションが防止されます。これは、アプリがタッチをどのように利用するかをカスタム調整する場合に最適です。

于 2012-12-21T16:52:28.143 に答える
0

理想的または洗練されたソリューションではありませんが、、およびイベントリスナーを使用してMSPointerDown、MSPointerMoveスワイプMSPointerUpを検出し、Defaultを防止できますか？

// Touch events
target.addEventListener('MSPointerDown', callback);
target.addEventListener('MSPointerMove', callback);
target.addEventListener('MSPointerUp', callback);
于 2012-12-01T00:53:19.863 に答える
0

編集：以下は、Windows Phone 8.1でのスワイプによるナビゲーションを防止しませんが、Windows8.1タブレットでのスワイプナビゲーションを防止します。誰かに部分的に役立つかもしれないので、ここに答えを残します。

ページがビューポートよりも大きい場合（タッチしてパン）、次のCSSが機能します（編集：8.1タブレットでのみ）。

html {
  -ms-scroll-chaining: none;
}

ページがビューポートよりも小さい場合（つまり、ページがスクロール可能/パン可能でない場合、たとえばズームアウトされている場合）、上記は機能しません。

ただし、次のようなコードは私にとっては機能します（編集：8.1タブレットのみ）：

CSS：

html.disable-ie-back-swipe {
    overflow: scroll;
    -ms-scroll-chaining: none;
}

JavaScript：

if (navigator.msMaxTouchPoints) {
    if (/Windows Phone/.test(navigator.userAgent)) {
        document.documentElement.classList.add('disable-ie-back-swipe');
    } else {
        try {
            var metroTestElement = document.createElement('div');
            metroTestElement.style.cssText = 'position:absolute;z-index:-1;top:0;right:0;bottom:-10px;width:1px';
            document.body.appendChild(metroTestElement);
            if (Math.round(window.outerWidth - metroTestElement.offsetLeft) === 1) {
                document.documentElement.classList.add('disable-ie-back-swipe');
            }
            document.body.removeChild(metroTestElement);
        } catch (e) {   // window.outerWidth throws error if in IE showModalDialog
        }
    }
}

JavaScriptに関する注意：

  • テストnavigator.msMaxTouchPointsでは、これがIE10 / IE11であり、デバイスがタッチを使用していることを確認します。
  • 編集：Windows Phoneを検出し、disable-ie-back-swipeを設定しますが、CSSは実際にはWindows Phone8.1ARRRGHの機能を無効にしません。
  • MetroTestElementは、モダンをテストします（モダンにはスクロールバーがないため、右は1ピクセルですが、デスクトップにはスクロールバーがあるため、スクロールバーの幅に応じて右は18ピクセル程度です）。
  • このコードは、IE11とmodernが使用されている場合にのみ、バックスワイプを無効にします。
  • CSSルールにはhtmlまたはbodyのいずれかを使用できるようですが、どちらが実際に優れているかはわかりません（IMHOは通常、bodyをページでスクロール不可と見なし、htmlをビューポート/ウィンドウと見なしますが、実際にはIE実装の詳細）。

編集2：このIE機能は「フリップアヘッド」と呼ばれます。企業はグループポリシーを使用して無効にできる場合があります-http://www.thewindowsclub.com/enable-disable-flip-feature-internet-explorer-10を参照してください

于 2015-01-14T04:17:56.163 に答える
0

私が取り組んでいたプロジェクトでは、まさにこれが必要でしたが、特定の領域でスクロールする必要がありました（一般的なスクロールだけでなくオーバーフロー）。以下は、IE11（Metro）Surface2およびLumia930のIE11WinPhoneでテストされた場合に機能するようです。また、水平スクロールも行うタッチマウスを使用します。

こちらのデモをご覧ください：http：//jsbin.com/fediha/1/edit？html 、css、output

履歴の前後を無効にする秘訣は、水平方向にスクロールする要素を除くすべての要素で「pan-x」を無効にすることのようです。CSSからの抜粋：

    * {
      /* disallow pan-x! */
      touch-action: pan-y pinch-zoom double-tap-zoom;
      /* maybe add cross-slide-x cross-slide-y? */
    }
    .scroller-x,
    .scroller-x * {
      /* horizontal scrolling only */
      touch-action: pan-x;
    }
    .scroller-y,
    .scroller-y * {
      /* vertical scrolling only */
      touch-action: pan-y;
    }

まれに、履歴がトリガーされることはありますが、それは非常にまれです（タブレットを激しくフリックすることによってのみこれを行うことができ、それでもたまにしか発生しません）。

touch-actionIE11のみです。IE10では必要です-ms-touch-actionが、IE10はもうあまり使用されておらず、テストデバイスもありません。

于 2015-04-18T15:47:20.113 に答える