iOSでページ全体のスクロールを禁止させるベストプラクティス

モーダルやドロワーメニューなどを実装する際に、表示中はページ全体のスクロールを禁止させたいということがよくあるかと思います。

僕も以前ドロワーメニューのjQueryプラグインを作ったときに、ページ全体のスクロールを止めるために試行錯誤してました。
そのときの知見を踏まえて、改めて現時点でのベストプラクティスを考察してみました。

ダメなパターン1
1. body全体に overflow をかけることで、スクロールを制御する。
ダメなパターン2
1. windowオブジェクトのtouchmoveイベントを無効化する。
ベストプラクティス
1. デメリット
最後に

ダメなパターン1

body全体に overflow をかけることで、スクロールを制御する。

body {
  overflow: hidden;
}

多分誰もが最初に思いつきそうなやつです。

一応これでもPCやAndroidではうまくいきますが、iOS Safariでは効きません。

よってiOSも対応させたい場合（がほとんどだと思いますがｗ）は、他の方法で対応するしかありません。

ダメなパターン2

windowオブジェクトのtouchmoveイベントを無効化する。

デモはこちら

window.addEventListener('touchmove', function(event) {
  event.preventDefault();
});

ググるとわりとよく出てくるやつです。

この方法はタッチイベントのみを制御するので、デスクトップ端末用にパターン1と併用することになるでしょう。

iOSでも想定通りの挙動になるため、一見うまくいっているように思えます。

しかしこのやり方では一つ落とし穴があります。

それは他の要素でスクロールさせたい部分があった場合、それらも全てスクロールされなくなってしまうことです。

例えばtextareaであったり、モーダル内にコンテンツが多い場合はその中でスクロールさせることもあるでしょう。

この方法だと、それらのスクロールも禁止されてしまうため、もし他の要素はスクロールさせたいといった場合は、他の方法で対応するしかありません。

ベストプラクティス

結論としては、下記のやり方が現時点ではベストプラクティスなんじゃないかと思います。

それは、body全体にposition fixedをかけて、topの値をスクロール値に設定してしまうというもの。

言葉で説明しても分かりづらいですねｗ

ソースコードにすると、こんな感じです。

.no_scroll {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

const body = document.getElementsByTagName('body')[0];
const btn = document.getElementById('btn');
let scrollTop = 0;

btn.addEventListener('click', () => {
  if (body.classList.contains('no_scroll')) {
    // スクロール開放
    body.style.top = '';
    body.classList.remove('no_scroll');
    window.scrollTo(0, scrollTop);
  } else {
    // スクロール禁止
    scrollTop = window.scrollY;
    body.style.top = (scrollTop * -1) + 'px';
    body.classList.add('no_scroll');
  }
});

デモはこちら

説明のためにトリガーは適当にボタンのクリックイベントにしておきます。

重要なのは14行目あたりのbodyのstyleに「top」をセットしている箇所になります。

position fixedにすることで強制的にスクロールできないようにしてしまいますが、それだけだと位置が一番上に来てしまうので、現在のスクロール値を「top」に設定することで、スクロール位置があたかもそのまま固定されているように見せているという仕組みですね。

この方法でiOSを含め全てのブラウザで同様の挙動にできます。