【JavaScript】モーダル・グロナビを開いている時のスクロールを禁止する

概要

モーダルなどを開いているときには、裏のコンテンツはスクロール禁止にした方がUX的に良いと思います。

iOSのせいでoverflow:hiddenだけではきかないので、jsで実装していきます。
jsでcss（positionとtopのみ）を操作するので、cssファイルを編集する必要はありません。

• 開く
• 閉じる
• toggle

開く

1. bodyにtop:スクロールYとposiiton:fixedを付与（posiiton:fixedを付けた時点でスクロール量0）になるので、fixedより先に

//裏のスクロール禁止
const noScrollAdd = () => {
    const body = document.body;
    body.classList.add("noscroll");
    // モーダルが開いたら、bodyにfixedを付与
    let scrollY =
        window.scrollY ||
        document.documentElement.scrollTop ||
        body.scrollTop;
    body.style.top = "-" + scrollY + "px";
    body.style.position = "fixed";
};
noScrollAdd();

閉じる

1. topの値を変数に保管しておく（position空にする前）
2. bodyのposition,topを空に
3. topの変数をWindow.scrollTo()に入れる

//裏のスクロールできるように
const noScrollRemove = () => {
    const body = document.body;
    // レイヤーが閉じたら、topをscrollTopに
    let top = body.style.top;
    body.style.position = "";
    body.style.top = "";
    window.scrollTo(0, parseInt(top || "0") * -1);
    body.classList.remove("noscroll");
};
noScrollRemove();

toggle

//スクロール禁止
const noScrollToggle = () => {
  const body = document.body;
  if (body.classList.contains('noscroll')) {
    // レイヤーが閉じたら、topをscrollTopに
    let top = body.style.top;
    body.style.position = '';
    body.style.top = '';
    window.scrollTo(0, parseInt(top || '0') * -1);
    body.classList.remove('noscroll');
  } else {
    body.classList.add('noscroll');
    // モーダルが開いたら、bodyにfixedを付与
    let scrollY = window.scrollY || document.documentElement.scrollTop || body.scrollTop;
    body.style.top = '-' + scrollY + 'px';
    body.style.position = 'fixed';
  }
}
noScrollToggle();

cssの崩れ防止

bodyをposition:fixed;すると、100%以上に拡大することがあるので、width:100%;にしておきましょう。

body {
    width:100%;
}