結論
mousewheel
イベントとwheel
イベントの両方を設定した場合、wheel
イベントしか発火しない。
mousewheel
イベントは non-standard かつ deprecated なので wheel
イベントを使うべき。
経緯
- 某ブログをChromeで閲覧すると何故かマウスホイールでのスクロールができなかった
- キーボード(↓↑・スペース・PageDown/Up)での移動はできた
- 別のブラウザでは問題ない
- 他の人も問題ない
- (スクロールがなんか滑らかだ?)
- もしかしたらChrome拡張が原因かもしれないと思い調べたら、ホイールスクロールに関係するChrome拡張が有効になっているとスクロールできないことが判明
- スクロールを滑らかにするjQuery.NiceScrollを使用されていた
- ソースを確認するとNiceScrollのバージョンが古かった
- より新しいNiceScrollを使っている別のWebページで検証 → スクロール問題ない
- 古いNiceScrollに何かありそう →
mousewheel
イベントが使われていた
検証
mousewheel
イベントを使うとなぜスクロールできなくなるのか検証。
仮説:Chrome拡張では wheel
イベントを使っていたので、相性が悪いのかも?
条件
- Google Chrome 48.0.2564.109 m (64-bit)で確認
- 2回ホイール回転
1. mousewheelのみ
document.addEventListener("mousewheel", function() {
console.log("mousewheel: 1");
});
document.addEventListener("mousewheel", function() {
console.log("mousewheel: 2");
});
console.log
mousewheel: 1
mousewheel: 2
mousewheel: 1
mousewheel: 2
2. wheelのみ
document.addEventListener("wheel", function() {
console.log("wheel: 1");
});
document.addEventListener("wheel", function() {
console.log("wheel: 2");
});
console.log
wheel: 1
wheel: 2
wheel: 1
wheel: 2
3. mousewheelとwheel両方
document.addEventListener("mousewheel", function() {
console.log("mousewheel: 1");
});
document.addEventListener("mousewheel", function() {
console.log("mousewheel: 2");
});
document.addEventListener("wheel", function() {
console.log("wheel: 1");
});
document.addEventListener("wheel", function() {
console.log("wheel: 2");
});
console.log
wheel: 1
wheel: 2
wheel: 1
wheel: 2
結論
mousewheel
イベントとwheel
イベントの両方を設定した場合、wheel
イベントしか発火しない。
mousewheel
イベントではなくwheel
イベントを使う。
参考
NiceScrollの該当部分の実装
最新版のjQuery.NiceScroll 1 は、mousewheelではなくwheelを使っているので問題無さそうです。
if ("onwheel" in _doc.createElement("div")) { // Modern browsers support "wheel"
self._bind(el, "wheel", fn, bubble || false);
} else {
ホイールイベントのMDNドキュメント
mousewheel - Event reference | MDN
Do not use this wheel event.
This interface is non-standard and deprecated.
This event replaces the non-standard deprecated mousewheel event.
-
2019/11/17 現在 v3.7.6 ↩