Reactで、モーダル画面時に背景スクロールを防止する

概要

Reactの環境下でモーダル画面を表示している状況で背景がスクロールすることを防止する方法です。

コード

document.bodyのスクロールを防止するのが簡単そうです。

// 背景スクロールを防止する。
useEffect(() => {
    // マウント時に背景スクロールを防止
    document.body.style.overflow = 'hidden';
    return () => {
        // アンマウント時にスクロール可能に戻す
        document.body.style.overflow = 'auto';
    };
}, []);