【React】ハンバーガーメニュークリック時にスクロールできないようにする方法

どうも。へんじにゃ@hengin_blogです。

今回はReactでハンバーガーメニューを押したときに背面を固定する方法をお伝えしていきます

Reactでハンバーガーメニューを押したときに背面を固定したい

ハンバーガーメニューを押したときに背面を固定するにはある一つのCSSプロパティを用いれば実現できます！

背面を固定するにはoverflow: hidden;を用います

これをハンバーガーメニュークリック時にbodyタグに追加できれば作業は終了です

しかしReactでは基本的にApp.jsに記述していくため直接的にbodyをいじることが出来ません。。

そのため以下のようにしてbodyを操作します

useStateを用いる

const [active, setActive] = useState(false);

if (active) {
  document.body.classList.add('active');
} else {
  document.body.classList.remove('active');
}

setActiveはHeader.jsxにてハンバーガーメニューをクリックしたときにactiveがtrueとfalseで切り替わるようになっています

<div className={`hum ${active ? "active" : ""}`} onClick={() => setActive(!active)} >

bodyに.activeが追加される

onClickよりbodyにactiveclassが追加されるので、CSSを当てていきます

body.active {
    overflow: hidden;
}

まとめ

シンプルにこういうDOM操作が分からなかったのでちょっと苦戦していましたが、なんてことないです

また、最近Sassを始めたので少し記事にしようかなと考えているところです。。

最後まで閲覧頂きありがとうございました😂😂

参考になったら読者登録よろしくお願いいたします！！
読者登録返しします！！

読者になる