【Alpine.js】モーダルの背景スクロールを止める方法

alpine.js

モーダルの背景スクロールを止める方法

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;"

コメントを残す

メールアドレスが公開されることはありません。