Vue.jsでスムーススクロールを使う

Vue.jsでスムーススクロールを実装する

案件でVue.jsでスムーススクロールを実装することがあったのでメモ。

npmパッケージを調べる

どうやら２種類あるらしい。
https://www.npmjs.com/package/vue-smoothscroll
https://www.npmjs.com/package/vue-smooth-scroll
「-」があるかないか。非常に紛らわしい。

どっちがいいのか

よくよく調べると「vue-smooth-scroll」は「vue-smoothscroll」をforkして作っているだけっぽい。
どうやら機能が多すぎるからもっとスマートで良くない？という思考のようだ。
なお、「vue-smoothscroll」も元を辿れば
https://github.com/alicelieutier/smoothScroll/blob/master/smoothscroll.js
こちらのプラグインを使用している模様。

weekly downloads

vue-smoothscroll：425
vue-smooth-scroll：1,087
という結果であった（2018/10/23 現在）
使用数だけで見るとvue-smooth-scrollのが良さそうに見える

メンテナンス

ただ、「vue-smoothscroll」が3ヶ月前にメンテされてるのに対して「vue-smooth-scroll」は最終更新が1年前となっていた。
fork元がメンテされているのに対して、何も更新がされていないというのは怖いので今回は「vue-smoothscroll」を使うことにした。

Installation

# install dependencies
npm install vue-smoothscroll --save

普通にインストールする

ソースコード

必要な箇所だけ簡単に書くとこんな感じ。

index.js

import smoothScroll from 'vue-smoothscroll'
Vue.use(smoothScroll)

app.vue

<template>
  <a href="#" @click="clickSmoothScroll()">飛ばし先</a>
  <div id="hoge">飛び先</div>
</template>

<script>
export default {
  methods: {
    clickSmoothScroll () {
      event.preventDefault()
      this.$SmoothScroll(
        document.querySelector('#hoge'),
        400,
        null,
        null,
        'y'
      )
    }
  }
}
</script>

無事うまくスムーススクロールした。パチパチ。

オプション

公式ドキュメントでは下記の通りになっている。

this.$SmoothScroll(target,duration,callback,context，axis);

・target：DOMオブジェクト
→どのDOMにスクロールするか。
・duration：Int型（デフォルト：500ms）
→何秒かけてスクロールするか。
・callback：関数
→callbackで実行する関数を指定できる模様。
・context：？？？
→よくわからなかった。デフォルトウィンドウだったりDOMオブジェクトを指定できるよと説明がある。
・axis：'x','y','both'
→どの方向にスクロールするか。

一言

jQuery使わず簡単に実装ができるのでぜひ。