タッチスワイプ検出

解説

このスニペットは、スマートフォンでの上下左右のスワイプを検出して、向きごとに色とラベルを表示するデモです。touchstart で指が触れた座標を覚え、touchend で離れた座標との差を計算します。横の移動量と縦の移動量のどちらが大きいかで主たる方向を判定し、符号によって左右か上下かを決めます。移動量が小さいときは軽いタップとみなして反応しないよう、20 ピクセル未満は無視するしきい値を設けてあるため、誤作動が起きにくくなっています。インジケーターは方向ごとの色に変わり、transform で少し拡大して反応を分かりやすく伝えます。

使いどころ

• 画像カルーセルやスライドを指で送る操作の土台
• カードを左右に振り分ける承認・却下のジェスチャー
• モバイルメニューを横スワイプで開閉する仕掛け

判定の感度はしきい値の数値で、色やラベルは colors と labels のオブジェクトで自由に変えられます。touch-action:pan-y を指定しているため、縦スクロールは妨げません。注意点として、これはタッチ専用でマウスのドラッグには反応しないため、PC でも試せるようにするにはポインタイベントを併用してください。イベントは passive:true で登録されており、スクロール性能を損なわない作りになっています。