#v-scroll-lockとは
v-scroll-lockは(modal / lightbox / flyouts / nav-menus)等のスクロールを
中断することなくボディのスクロールをロックするライブラリです。
#v-scroll-lockの導入方法
以下のnpm、yarn、CDNを使ってインストールします。
- npm
npm install v-scroll-lock --save
- yarn
yarn add v-scroll-lock
- CDN
<script src="https://cdn.jsdelivr.net/npm/v-scroll-lock@1.0.1/dist/v-scroll-lock.min.js"></script>
#導入手順
###1.ライブラリの取り込み
import VScrollLock from 'v-scroll-lock'
Vue.use(VScrollLock)
v-scroll-lockは、インストールされた時点では、body全体のスクロールがロックされてしまいます。
###2.メソッドを設定
export default {
name: 'Modal',
data() {
return {
open: false,
}
},
methods: {
openModal() {
this.open = true
},
closeModal() {
this.open = false
},
},
}
dataに、open: falseを追加ことによって、通常時(モーダル非表示時)にはスクロールが可能になります。
openModalやcloseModalを設置し、openModalにはthis.open = trueを設置、
これでv-on:click="openModal"が呼び出されたときに、背景スクロールは停止します。
body要素には、style="overflow: hidden"が追加されている状態です。
closeModalが呼び出されたら、this.open = falseが発動し、通常時のスクロールは可能となる。
###3. テンプレートを準備
<template>
<div class="post-inner">
<button @click="show(); openModal();" class="post-comment flex">
<img class="comment-icon" src="../assets/コメント.jpg" alt="コメント" />
</button>
<modal class="modal-inner" v-scroll-lock="open" name="post" :width="750" :height="485">
<button class="hide-btn flex" @click="hide">×</button>
</template>
#まとめ
上記と設定してあげるだけで簡単にスクロールをロックすることが出来たかと思います。