この記事に書いてあること
JavaScriptプラグインのbody-scroll-lock.jsの使い方について
サイトリンク
body-scroll-lock.jsとは？
ターゲット要素（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです
対象ブラウザ
iOS Mobileおよびタブレット、Android、デスクトップSafari/Chrome/Firefox
どんな時に使うか？
例えばモーダルを表示した時に、背景を固定したいといった場合に使うことができます。
モーダルの中だけスクロールを有効にして、背景固定を実現するなんてことも簡単に実装可能です。
なぜ使うの？
スクロールのロックは簡単そうに思えて、実は結構面倒くさい処理内容です。
例えば、
overflow:hidden;iOSで動作しない問題
position: fixedは、ボディのスクロールがリセットされちゃう問題
などなど、WEB製作者の頭を結構悩ませるのです。
使い方
インストール
パッケージインストール
yarn add body-scroll-lock
or
npm install body-scroll-lock
CDN
https://cdnjs.com/libraries/body-scroll-lock
Functions
対象要素以外の、ボディのスクロールを無効化
//hoge以外のスクロール禁止
bodyScrollLock.disableBodyScroll(‘hoge’)
対象要素の、ボディのスクロールを有効化
//hoge以外のスクロール有効化
bodyScrollLock. enableBodyScroll(‘hoge’)
全てのスクロール禁止を解除
bodyScrollLock.clearAllBodyScrollLocks( )