タッチスクリーン上で一度に一方向にスクロールするように剣道グリッドを制限する

Question

ユーザーがタッチスクリーンデバイス上にいるとき、斜めスクロールを制限したいと思っています。または垂直である。

タッチスクロールが有効になっているかどうかを検出し、x座標とy座標を出力できるJS Fiddleを設定しました。しかし、私は意図された方向を計算するために必要なオフセットや何かを見ません。

リンゴが制限するdirectionalLockEnabledを使用していることは知っています。このようなものが剣道で利用可能かどうかは疑問です。そうでない場合は、ユーザーがスクロールする方向を把握し、他の座標を「フリーズ」する方法があります。

私が作成したA JSフィドル（dataBound方法で関連する部分）：

http://jsfiddle.net/dmathisen/tskebcqp/

（関連するコードのみtouch上で動作します...しかし、あなたはdevのツールでモバイルエミュレーションを有効にする場合は動作するはずです）

もう1つの問題は、スクロールイベントがトリガーされる時間です。作業しているときに、おそらくトリガされる頻度を処理するためにデバウンスを設定することができます。

Answer 1

この修正にjavascriptを使用する場合は、XおよびY移動の範囲を計算できます。タッチデバイスとそのために 、車輪装置の場合ときtouchmove

var touchY = touchX = 0; 
    $(document).delegate('.yourWrap', 'touchstart', function(e){ 
     touchX = e.originalEvent.touches[0].pageX; 
     touchY = e.originalEvent.touches[0].pageY; 
    }); 
    $(document).delegate('.yourWrap', 'touchmove', function(e){ 

     if (Math.abs(touchX - e.originalEvent.touches[0].pageX) 
      > Math.abs(touchY - e.originalEvent.touches[0].pageY)) { 
      // Block overflow-y 
     } else { 
      // Block overflow-x 
     } 
     touchX = e.originalEvent.touches[0].pageX; 
     touchY = e.originalEvent.touches[0].pageY; 
    }); 

距離をtouchstartとCalculが時に開始POSIのXとYを設定し、デルタ

(e.wheelDeltaY/3 || -e.deltaY) 
(e.wheelDeltaX/3 || -e.deltaX)