42
33

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-10-23

#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使わず簡単に実装ができるのでぜひ。

42
33
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42
33

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?