Google Chromeでwheelイベントとmousewheelイベントは共存しない話

結論

mousewheelイベントとwheelイベントの両方を設定した場合、wheelイベントしか発火しない。
mousewheelイベントは non-standard かつ deprecated なので wheelイベントを使うべき。

経緯

1. 某ブログをChromeで閲覧すると何故かマウスホイールでのスクロールができなかった
   • キーボード（↓↑・スペース・PageDown/Up）での移動はできた
   • 別のブラウザでは問題ない
   • 他の人も問題ない
   • （スクロールがなんか滑らかだ？）
2. もしかしたらChrome拡張が原因かもしれないと思い調べたら、ホイールスクロールに関係するChrome拡張が有効になっているとスクロールできないことが判明
3. スクロールを滑らかにするjQuery.NiceScrollを使用されていた
   • ソースを確認するとNiceScrollのバージョンが古かった
   • より新しいNiceScrollを使っている別のWebページで検証 → スクロール問題ない
   • 古いNiceScrollに何かありそう → mousewheel イベントが使われていた
     • ※ mousewheelイベントはnon-standard かつdeprecated

検証

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 ¹ は、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.

wheel - Event reference | MDN

This event replaces the non-standard deprecated mousewheel event.

---

1. 2019/11/17 現在 v3.7.6 ↩