feat: add v-scroll directive

Author: hisasann

package.json

@@ -63,6 +63,7 @@
     "nuxt-client-init-module": "^0.1.4",
     "nuxt-env": "^0.1.0",
     "nuxt-property-decorator": "^2.1.3",
+    "throttle-debounce": "^2.1.0",
     "ts-node": "^8.1.0",
     "vue-carousel": "^0.18.0",
     "vue-i18n": "^8.10.0",

src/pages/example/index.vue

@@ -55,6 +55,8 @@ section
     nuxt-link(to='/example/routing-validate/true') routing-validate - validate is true
   p
     nuxt-link(to='/example/routing-validate/false') routing-validate - validate is not true
+  p
+    nuxt-link(to='/example/v-scroll') v-scroll
 </template>
 
 <script lang="ts">

src/pages/example/v-scroll.vue

@@ -0,0 +1,59 @@
+<template lang="pug">
+section
+  h1.title
+    | v-scroll
+  div
+    h2.elem1 aaa
+  div.center
+  div
+    h2(class="elem2", v-scroll="handleScroll") bbb
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import scroll from '@/plugins/directives/scroll'
+
+@Component({
+  directives: {
+    scroll
+  }
+})
+export default class extends Vue {
+  public handleScroll(evt, el) {
+    // console.log(window.scrollY, el.scrollTop)
+    const rect = el.getBoundingClientRect().top
+    if (rect < 950) {
+      console.log('出現')
+      el.setAttribute(
+        'style',
+        'opacity: 1; transform: translate3d(0, -10px, 0)'
+      )
+
+      return true
+    }
+    return false
+  }
+
+  public head() {
+    return {
+      title: 'v-scroll'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.center {
+  height: 1000px;
+}
+
+.elem1 {
+  color: white;
+  background-color: #3b8070;
+}
+
+.elem2 {
+  color: white;
+  background-color: #526488;
+}
+</style>

src/plugins/directives/scroll.ts

@@ -0,0 +1,40 @@
+// .vue ファイルの中で Component に指定するなら以下の書き方を使う
+// import scroll from '@/plugins/directives/scroll';
+//
+// @Component({
+//   directives: {
+//     scroll
+//   }
+// })
+
+import { throttle } from 'throttle-debounce'
+
+export default {
+  inserted: (el, binding): void => {
+    const f = throttle(
+      20,
+      (evt): void => {
+        if (binding.value(evt, el)) {
+          window.removeEventListener('scroll', f)
+        }
+      }
+    )
+
+    window.addEventListener('scroll', f)
+  }
+}
+
+// nuxt.config.ts の plugin に定義するなら以下の書き方を使う
+
+// import Vue from 'vue'
+//
+// Vue.directive('scroll', {
+//   inserted: function(el, binding) {
+//     let f = function(evt) {
+//       if (binding.value(evt, el)) {
+//         window.removeEventListener('scroll', f)
+//       }
+//     }
+//     window.addEventListener('scroll', f)
+//   }
+// })

yarn.lock

@@ -11764,6 +11764,11 @@ throat@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
 
+throttle-debounce@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.1.0.tgz#257e648f0a56bd9e54fe0f132c4ab8611df4e1d5"
+  integrity sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg==
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"