Nuxtで開発をしてて、ドラッグスクロールしたいなと思ったら、
便利なライブラリがあったので、試したときの備忘録。

ドラッグスクロールは、スクロールするのをマウスホイールじゃなくて、
左クリックを押してドラッグしながら、スクロールするやつ。

デモサイトを見るとわかりやすいかも。こんな感じ。 f:id:wannabe-jellyfish:20200602110317g:plain

インストール

まずはインストール。

$ npm i vue-dragscroll

使い方

すごく簡単。用意されてるディレクティブを追加して、設定するだけ。

<template>
  <section>
    <!-- v-dragscrollを追加 -->
    <div  v-dragscroll>
      <!-- スクロールしたい領域 -->
    </div>

  </section>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
import { dragscroll } from "vue-dragscroll";

@Component({ directives: { dragscroll } })
export default class HogePage extends Vue {
}
</script>

<style lang="scss">
//  カーソルはデフォルトなので、自分で設定
.grab-bing {
  cursor : -webkit-grab;
  cursor : -moz-grab;
  cursor : -o-grab;
  cursor : grab;
}


.grab-bing:active {
  cursor : -webkit-grabbing;
  cursor : -moz-grabbing;
  cursor : -o-grabbing;
  cursor : grabbing;
}
</style>

以上!!　簡単(´ω｀)

くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Vueでドラッグスクロール

インストール

使い方

参考にしたサイト様