eclairのブログ 
モーダルの背景スクロールを止める方法
bodyタグにCSSでoverflow:hiddenをつけることで背景スクロールを止められる。
Alpine.jsでこれを実現するにはグローバルストアで$store.disabledScrollにboolean値を設定して管理する。bodyタグにその値に応じてoveflow:hidden;を指定してあげれば実現できる。
本記事ではTailwind CSSを用いて代わりにoverflow-hiddenクラスを付与して対応しています。
実際の手順とソースコード
Alpine.jsをCDNから読み込む
<script src="//unpkg.com/alpinejs" defer></script>モーダルの背景スクロールをとめる
bodyタグに以下の背景スクロールをとめる処理を追加する
x-bind:class="{'overflow-hidden': $store.disabledScroll}"モーダルを開く
ボタンに以下のモーダルを開く処理を追加する。合わせて背景スクロールも止める。
x-on:click="$store.openModal = true; $store.disabledScroll = true; "モーダルを閉じる
ボタンに以下のモーダルを閉じる処理を追加する。合わせて背景スクロールを止める処理を解除する。
x-on:click="$store.openModal = false; $store.disabledScroll = false;"
