【Vue.js】v-scroll-lockを使って、スクロールのロックを実装

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

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>

まとめ

上記と設定してあげるだけで簡単にスクロールをロックすることが出来たかと思います。