JavaScriptでスクロールを禁止、bodyを固定・解除する

投稿日：2024/10/26 更新日：2024/12/27

用途

モーダルの後ろでスクロールさせたくない！
アニメーションで全画面覆ってるから背景をスクロールさせたくない！
あるあるだと思うので、コードをまとめてみました。

サンプルコード

HTML

<div>
  <button type="button" onclick="bodyFixed(true)">固定</button>
  <button type="button" onclick="bodyFixed(false)">解除</button>
</div>

JavaScript

let scrollHeight = 0;
 
function bodyFixed(lock) {
  let obj = document.querySelector('body');
  if (lock) {
    scrollHeight = window.scrollY;
    obj.style.position  = 'fixed';
    obj.style.marginTop = scrollHeight * -1 + 'px';
  } else {
    obj.style.marginTop = '';
    obj.style.position  = '';
    window.scrollTo(0, scrollHeight);
  }
}

使い方は、bodyFixedの引数にtrueを入れれば固定、falseを入れれば解除となっています。

解説

HTMLは確認用のボタンを設置しているだけなので、JS側を解説したいと思います。

固定

まず、bodyにposition: fixed;を当てて固定させてます。
margin-topにスクロール量分のマイナスを当てているのは、fixedにしたことでページ上部まで戻ってしまうのを抑える目的です。
また、固定が外されたときのために、現時点でのスクロール量を変数（scrollHeight）に格納しておきます。

解除

fixedとmargin-topを消します。その後、元のスクロール位置に戻すため、変数に格納してある値を使用しています。

以上で解説を終わります。

もっと良い方法などあるとは思いますが、私が良く使うのはこの方法です！誰かの参考になれば幸いです！