これでマウスホイールを回したタイミングを検知できる。 ホイールを回すというイベントであってスクロールしなくても発生する。 なので、マウスホイールは回すが、スクロールせずに何かしたいみたいなキモいUIを実装したいならこれを制御することになる。 スクロールイベントはスクロールすることに対して発生して、スクロールしないなら発生しない。

ホイール操作に対するイベントではあるが、トラックパッドの2本指スワイプのような操作でも発生する。 トラックパッドの2本指スワイプのようなスクロール操作は慣性スクロールになっていることが多く、 この場合この wheel イベントが連続的に発生(数秒間に渡って数百回)するので、このハンドリングは注意する必要がある。

基本的に window につけるイベントでオブジェクトによる限定ができない？

e.preventDefault();

でキャンセルするとホイールでスクロールできなくなる。 が！条件付きで、このイベントはデフォルトで preventDefault を受け付けない仕様になっている。 つまり preventDefault してもスクロールしてしまう。

この理由はパフォーマンスに関すること。 ホイール操作に対する画面の追従にはユーザーは非常に敏感でありオブジェクトの全preventDefaultをチェックするまで動作できないというのは挙動の上で問題になることが多い。なのでこの設定はデフォルト無視する仕様になっている。

window.addEventListener("wheel", (e)=>{
    console.log("wheel");
    // 無視チェック
    if(ignore){
        return;
    }
    ignore = true;
    setTimeout(()=>{
        ignore = false;
    }, 3000);
    // 何か処理
});