ボディのスクロールをロックする「v-scroll-lock」の使い方

v-scroll-lockとは

v-scroll-lockは（modal / lightbox / flyouts / nav-menus）等のスクロールを中断することなくボディのスクロールをロックするライブラリです。

インストール

以下のnpm、yarn、CDNを使ってインストールします。

npm

npm install v-scroll-lock --save

yarn

yarn add v-scroll-lock

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/v-scroll-lock.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/phegman/v-scroll-lock

導入手順

1. ライブラリの取り込み

（1）webpack等の場合 ※モジュール版は未検証です。

import VScrollLock from 'v-scroll-lock'

（2）WEBページの場合

const VScrollLock = window['v-scroll-lock'].default;

2.メソッドを設定

Vue.use を使ったグローバルで行う。

スクロールのロックをするために toggoleLook の methods を設定する。

Vue.use(VScrollLock)
let app = new Vue({
  el: '#app',
  data: {
    look: false
  },
  methods: {
    toggoleLook:function(){
      if(this.look == true)
        this.look = false;
      else
        this.look = true;  
    }
  }
});

3. テンプレートを準備

v-scroll-lock プロパティをロック中もスクロールしたい箇所に設定する。

<div id="app">
  <button @click="toggoleLook">Scroll Stop! [{{look}}]</button>
  <div class="box" v-scroll-lock="look">
    <div class="box-area">
　　　コンテンツ エリア
    </div>
  </div>
</div>

サンプル

>>専用ページで確認する

さいごに

ボディのスクロールをロックするライブラリでした。

正直、好きな要素のスクロールをロックできるものとばかり思っていたので、ボディのスクロールをロックするしかできなくて残念です。

場面によっては利用できるかもしれないので、覚えておくと良いかもしれません。

今日はこの辺でー