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

2019年10月8日

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

v-scroll-lockとは

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

 

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

 

インストール

以下のnpmyarnCDNを使ってインストールします。

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 を使ったグローバルで行う。

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

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>

サンプル

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

 

さいごに

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

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

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

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-, , , , ,