最終更新日：2021‐03-10

モーダルウィンドウなどを表示中に、下のレイヤーに表示しているページがスクロールしないようにするJavaScriptです。

//スクロール停止
function stopScroll() {
    $('html, body').css('overflow', 'hidden');
    document.addEventListener("mousewheel", scrollControl, { passive: false });
    document.addEventListener("touchmove", scrollControl, { passive: false });
}
// スクロール開始
function startScroll() {
    $('html, body').removeAttr('style');
    document.removeEventListener("mousewheel", scrollControl, { passive: false });
    document.removeEventListener('touchmove', scrollControl, { passive: false });
}

function scrollControl(event) {
    event.preventDefault();
}

addEventListenerの第3パラメータについて、少し気になったので調べてみました。

passive:false

となっているのですが、これは下記の引用に基づくものだと思います。

仕様書によれば、 passive オプションの既定値は常に false です。しかし、これは特定のタッチイベントを扱うイベントリスナーが (特に) スクロールを処理しようとしている間にブラウザーのメインスレッドをブロックする可能性をもたらしており、スクロール処理中の性能が大幅に低下する結果になる可能性があります。

この問題を防ぐために、一部のブラウザー (特に Chrome と Firefox) では、文書レベルノードである Window, Document, Document.body の touchstart および touchmove イベントの passive オプションの既定値を true に変更しています。これにより、イベントリスナーが呼び出されなくなるため、ユーザーがスクロールしている間にページのレンダリングをブロックすることができなくなります。

この動作は下記のように、明示的に passive の値を false に設定することで上書きできます。

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners

少し引用が長くなったのですが、要は、デフォルトの設定だとevent.preventDefaultを呼び出せないようなtouchstart, touchmoveイベントについても明示的にpassive:falseを設定することで、呼び出せるようにするということだと思います。

JavaScriptはどんどん進化していくので追いつくのが大変です…。

参考ページ

• MDN：EventTarget.addEventListener()
• addEventListener の第3引数が拡張されてるという話
• addEventListener()の第３引数の意味とかをちゃんと理解する為のメモ

shinya

技術の進化についていけていないシステムエンジニア。浅く広く、何でも大体はこなせるエンジニアで重宝されてる（つもり）。でもやっぱり特化した武器欲しい。
備忘録として記事を投稿していますが、少しでも誰かの助けになればと思います。
最近はプロジェクトでReact（TypeScript ）を触っています。

趣味でギター弾きます。