Reactでreact-burger-menuでの背面のスクロールを抑制する

react-burger-menuライブラリ

Reactアプリに簡単にハンバーガーメニューを実装できるものらしいです。
↓公式のリンクを貼っておきます

はじめに

react-burger-menuを使ってハンバーガーメニューを実装したが、メニューを開いている時にも背面がスクロールされてしまっています。
ライブラリの標準のonStateChangeプロパティを使ってメニューを開いている時だけスクロールを止めるようにした方法をメモします。

↓ハンバーガーメニュー開いてる時にスクロールすると、背面のbody要素もスクロールされちゃってきもちわるい

やりたかったこと

①メニューを開いているときに、背面のページをスクロールさせたくない

②メニューを閉じたらスクロールできる。

どうやるか

・メニューを開いている　メニューを開いていないという状態をどうにか取得して

メニュー開いている時

→body要素を固定

メニュー開いてないとき

→固定を解除

ってすれば行けそうな感じがします。

幸い、今回使っているreact-burger-menuにはstate（状態）を渡してくれる標準のプロパティが用意されてたのでこれを使う。

onStateChangeプロパティを使用

↓onStateChaneにコールバックを渡してその中でstateを受け取れるよう。

var isMenuOpen = function(state) {
  return state.isOpen;
};

<Menu onStateChange={ isMenuOpen } />

:引用 https://github.com/negomi/react-burger-menu#state-change

要素の固定

これは、普通にoverflowプロパティに"hidden"を渡せばいけそう。

overflow = "hidden"

要素の固定の解除

これは、overflowプロパティに"scroll"を渡せば戻る

overflow = "scroll"

実装内容

stateの状況ごとにoverflowプロパティを更新する処理を、コールバック関数内に記述して、onStateChangeプロパティに渡しておく。

  const isMenuOpen = (state) =>{
      //メニューが開いているとき
      if (state.isOpen) {
        document.body.style.overflow = "hidden";
        return () => {
          document.body.style.overflow = "auto";
        }
      }

     //メニューが開いていないとき
      document.body.style.overflow = "scroll";
      return () => {
        document.body.style.overflow = "auto";
      }
  }

return (
    <Menu onStateChange={ isMenuOpen } />
)

終わりに

ハンバーガーメニューを開いる状態でスクロールしても要素が動いていないことが確認できました。