モーダル、SPのメニューが表示されたときだけ中の要素をスクロールさせる

モーダル、SPのメニューが表示されたときだけ中の要素をスクロールさせる

※覚書メモです

以前jQueryでモーダルやSPのメニューを表示したときに背景を固定する記事を載せたことがありました。
しかしそれから数年たって、そんなことをしなくても簡単に実装できちゃういいものを見つけることができました（教えてくださった同僚には感謝です）。

body-scroll-lock

▽github
https://github.com/willmcpo/body-scroll-lock

▽npmjs
https://www.npmjs.com/package/body-scroll-lock

指定した要素だけスクロールができるようになるというライブラリ。
androidもiosも難なくできました。
まさにそれがしたかったこと…！

---

以下使い方

今回もyarnを使います。
yarnじゃなくてもnpmでも大丈夫です（インストールするときのかき方が違うので気を付けてください）

yarn add body-scroll-lock

例)開くとき

import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'

// 例えばメニュー
const openBtn = document.getElementsByClassName('openBtn')[0]
const menuInner = document.getElementsByClassName('menu-inner')[0] // スクロールさせたい要素

openBtn.addEventListener('click' , () => {
    disableBodyScroll(menuInner)
})

分かりやすいように「開く」「閉じる」を分けましたが、上の例に続いて書いても大丈夫です。

例)閉じるとき

// 例えばメニュー
const closeBtn = document.getElementsByClassName('closeBtn')[0]

closeBtn.addEventListener('click' , () => {
    clearAllBodyScrollLocks()
})

この2つだけ。スクロールさせたい要素の指定を変更すればすぐに実装できます。
あんなに頭を悩ませていましたが、本当に簡単なので早く知りたかったです。。

以上