javascriptまたはjQueryを使用してMicrosoft Edgeで「スワイプに戻る」を無効にするにはどうすればよいですか？

Question

現在、オブジェクトの水平回転機能を備えたウェブサイトで作業しています。それで、最初に見える画像が物体の前にあり、次に第2の画像が側面であり、第3の画像が背面であり、第4の画像がもう一方の画像であり、第5の画像が正面画像であるとする。

私の場合、私はオブジェクトの合計24の画像を持っています。つまり、各画像間に15度の角度差があることを意味します。 今は回転をよりスムーズにしようとしています。私のマウスを使用すれば、どのブラウザーでも完璧に動作します。しかし、私がMicrosoft Edgeのようなブラウザの代わりにタッチスクリーンを使用すると、状況がうまくいかなくなります。

エッジ上の問題は、私は右にオブジェクトをスワイプしようとした場合、それは何らかの形で機能エッジに「前のページに戻る」トリガー、ということです。それは私がクロムを使用しているときに私は単純なJavaScriptコードで修正できるものです。コードは次のようになります。

 $(".reel-holder").bind('touchstart', function(event) { 
       event.preventDefault(); 
       event.stopPropagation(); 
     }); 

エッジの上にスワイプするもう一つの問題は、回転が絵によって回転させられる、ということです。どのようにタッチスクリーンをスワイプしても、次の/前の画像にのみ移動します。

Javascript/JQueryでこの問題を解決するにはどうすればよいですか？

Answer 1

これは、touch-action CSSプロパティで実現できます。ブラウザがジェスチャーを処理しないようにする要素ごとに、touch-actionをnoneに設定します。または、共通の祖先でtouch-actionをnoneに設定するか、ブラウザがジェスチャーを処理しないようにするには、bodyに設定します。

スワイプでブラウザが前のページに戻るのを防ぐだけで、ブラウザで他のジェスチャを処理する場合は、touch-actionをpan-right pan-y pinch-zoomに設定します。

例：

.reel-holder { 
    touch-action: none; 
}