【モーダルなどの一時スクロール禁止】スクロールジャンクとは？

##やりたいこと
モーダルを開いたときに、「パソコンのスクロールを一時的止めたいな」
と思うことがありました。
とりあえずかいてみました。

window.addEventListener('mousewheel',(e)=>{
   e.preventDefault();
});

preventDefaulでスクロールの動きを封じるやつです。
でもエラーが出て全然動きません。

##スクロールジャンク防止が原因だった
↓こちらのサイトでスクロールジャンクを知りました。
https://blog.webico.work/passive-event-listeber01

どうやら、スクロール系のイベント(mousewheel,touchmove,wheelなど)は、
スクロールするたびに登録された全てのイベントにpreventDefault()がないか確認が終わるまで処理が行えないそうです。これが所謂スクロールジャンク。

それを防ぐためにaddEventListenerにはpassive：trueという値が初期値で設定されています。
これは実行前に、「preventDefault()実行しませんよ〜」と明示するものらしいです。

でも！
今回はprevcentDefault()を実行するので、ここの値をいじります。

##解決方法は？
passiveにfalseを渡してあげましょう。

window.addEventListener('mousewheel',(e)=>{
e.preventDefault();},{passive:false});

ちょっと待って！
昨日調べたことによると、イベントリスナの第三引数はuseCaptureというイベント伝播に関する引数だったはず...

##addEventListenerの第三引数の謎
https://qiita.com/kozy4324/items/85831e2c990d92b8397b
こちらの記事に答えがありました。
元々はuseCaptureのみだったみたいですが、拡張されたようです。現在では

element.addEventListener('click',Handler(),{
   once: true,
   passive: true,
   capture: true
});

と書けるとのこと。
（以前の書き方と互換性があり、第三引数にboolean型のみ渡した場合はcaptureの値として判断されるそうです。）

###onceってなに？
onceにすると、イベントハンドラが一度だけ処理されます。
一度しか読み込まないイベントを明示することで、メモリの節約になる！ってことですね。
毎回removeEventListenerを使うより随分楽ですね。