Next.jsにおいて、モーダルウィンドウ表示時に背景のスクロールを禁止したいです。
解決したいこと
Next.jsにおいて、モーダルウィンドウ表示時に背景のスクロールを禁止したいです。
試したこと
styles/globals.css
body {
overflow: hidden;
}
としたら、背景のスクロールが止まりました。
一方、pages/index.jsの中の最上位の<div>タグに対して、
overflow:hidden;
を設定しても、スクロールは止められませんでした。
以前、下記のような回答をいただいたことがあるのですが、Next.jsにおいて、
globals.cssに記載のあるbody要素に対して、動的にstyleをあてる方法がわかりません。
どなたかお分かりになる方がいらっしゃれば、ご教示いただけますと幸いです。
###以前にいただいた回答
/**モーダル表示時にbodyのスクロールを止める
* @see [モーダル表示時に後ろをスクロールしないようにする](https://reon777.com/2020/11/05/modal-background-scroll/)
*/
function stopBodyScroll() {
const body = document.querySelector('body')
if (body) {
body.style.overflow = 'hidden'
}
}
/**bodyのスクロールを再び可能にする
* @see [モーダル表示時に後ろをスクロールしないようにする](https://reon777.com/2020/11/05/modal-background-scroll/)
*/
function restartBodyScroll() {
const body = document.querySelector('body')
if (body) {
body.style.overflow = 'visible'
}
}
###自己解決しました。
下記のようなカスタムDocumentを作成
pages/_document.js
import Document, { Html,Head, Main, NextScript } from "next/document";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<style>{`body { margin: 0 } /* custom!*/`}</style>
</Head>
<body id="body1" className="custom_class">
<Main />
<NextScript />
</body>
</Html>
);
}
}
モーダルウィンドウを表示するコンポーネントのコードを修正
components/sidebar.js
const Sidebar = ({ categoryObj, categorySearchItems }) => {
...
const toggle = () => {
const body1 = document.getElementById("body1");
const checkbox1 = document.getElementById("menu-btn-check1");
if (checkbox1.checked == true) {
checkbox1.checked = false;
body1.style.overflow = "visible";
} else {
checkbox1.checked = true;
body1.style.overflow = "hidden";
}
};
return (
<>
<input
id="menu-btn-check1"
type="checkbox"
className={styles.checkbox1}
/>
<div className={styles.openbtn1} onClick={toggle}>
<span></span>
<span></span>
<span></span>
</div>
...
</>
);
};
export default Sidebar;
以上で、
ハンバーガーメニューをクリックすると、
背景スクロールが禁止となり、
もう一度クリックすると、
背景スクロール禁止が解除されることを確認できました。
0