【JavaScript】「Firefox wheel touch-action PC Windows タッチデバイス タッチパネル タッチイベント JavaScript」でお困りの方へ
JavaScriptでFirefoxだけPC上でのタッチイベントやホイールイベントが色々おかしい場合、大抵以下のどれかが該当するかもです。
Firefox は touch-action が効かない
Firefoxはデフォルトのタッチ操作を無効にするCSSの 「 touch-action 」 が2016年7月時点で未実装のようです。他の主要ブラウザは大体対応してるのになぁ。
https://developer.mozilla.org/ja/docs/Web/CSS/touch-action
そのため、Windows 8 や Windows 10でのタッチ操作がおかしくなります。
- JSでスクロール操作させたいのに「テキストを選択」する
- 「mousemove」イベントが正常に発火しない
スクロール制御に限定して言えば、スクロールさせたい要素に「 oveflow-y:scroll; 」を入れ、必要に応じてスクロールバーを非表示にすることで暫定的に対応は可能です。
http://qiita.com/naru0504/items/ff0c77775223dc5a9148
Firefoxだけスクロール量が少ない?
ホイール系のイベントに関して言えば、色々あるので詳細は以下
https://w3g.jp/blog/wheelevent_crossbrowser
Firefox17からサポートされているwheel(deltaX, deltaY, deltaZ)ですが、他のブラウザと比べて非常に少ない値を設定しているようです。例えばChromeやIEだと50〜100ぐらいある値が、Firefoxだと3とか4とかだったりします。
一見、Firefoxだけ値を20倍とかにすれば良いんじゃと思うのですが、そうすると Windows 8 や Windows 10でのタッチ操作で値が多すぎる(速度が早くなり過ぎる) という問題が発生します。ホイール操作かタッチ操作かを判断する術も現状なさそう?
そこで暫定的な解決方法にはなりますが、Firefoxのみ実装されている 「MozMousePixelScroll」 の値は、ホイール操作もタッチ操作も似たような値が取得できたため、
var eventName = 'MouseScrollEvent' in window ? 'MozMousePixelScroll' : 'onwheel' in document || document.documentMode >= 9 ? 'wheel' : 'mousewheel';
window.addEventListener(eventName, function() {
//タッチやホイール操作時に行いたい処理
});
みたいな形で対応すれば良いのかなと思います。