目次
VueScrollmonitorとは
VueScrollmonitorは、スクロールモニタで要素がビューポートに出入りするときにイベントを受け取ることができるライブラリです。
もともとはscrollMonitorというライブラリです。
要素を監視してイベントをトリガーするウォッチャーオブジェクトを使用して行います。
ウォッチャーオブジェクトには、ビューポートに対する要素の可視性や位置など、監視する要素に関する情報も含まれています。
インストール
以下のnpm、yarn、CDNを使ってインストールします。
npm
npm install vue-scrollmonitor
yarn
yarn add vue-scrollmonitor
CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-scroll-monitor.min.js"></script>
gitリポジトリは以下から取得できます。
https://github.com/AlexandreBonaventure/vue-scrollmonitor
導入手順
スクロールモニタで要素がビューポートに出入りするときのイベントを実装します。
1. ライブラリの取り込み
(1)webpack等の場合 ※モジュール版は未検証です。
import { ScrollContainer, ScrollItem } from 'vue-scrollmonitor'
(2)WEBページの場合
const VueScrollMonitor = window.VueScrollMonitor; const ScrollContainer = VueScrollMonitor.ScrollContainer; const ScrollItem = VueScrollMonitor.ScrollItem;
2.メソッドを設定
let items =[]; for(let i=0;i<1000;i++){ items.push('item-'+i); } Vue.component('scrollmonitor', { template: '#scrollmonitor', data() { return { state: {}, items:items } }, components: { ScrollContainer, ScrollItem, }, methods: { updateState (state) { this.state = state }, onChange (state) { console.log('change') }, }, }); let app = new Vue({ el: '#app' });
3. <scroll-container>と<scroll-item>テンプレートを準備
<div id="app"> <script type="text/x-template" id="scrollmonitor"> <scroll-container @change="updateState" class="flex"> <div class=""> <scroll-item v-for="i in items" :id="i" :key="i" @change="onChange"> <span v-text="i" :class="`${state[i] && state[i].isFullyInViewport ? '' : ''}`"></span> </scroll-item> </div> </scroll-container> </script> <scrollmonitor /> </div>
サンプル
See the Pen vue-scroll-monitor by カバの樹 (@kabanoki) on CodePen.dark
さいごに
スクロールモニタで要素がビューポートに出入りするときにイベントを受け取ることができるライブラリでした。
今日はこの辺でー