#Vue.jsでスムーススクロールを実装する
案件でVue.jsでスムーススクロールを実装することがあったのでメモ。
##npmパッケージを調べる
どうやら2種類あるらしい。
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使わず簡単に実装ができるのでぜひ。