ykob · May 18, 2020 11:52 · May 18, 2020 · May 18, 2020 · May 18, 2020
diff --git a/App.vue b/App.vue
@@ -7,8 +7,7 @@ export default {
   created() {
     window.addEventListener("resize", this.resize);
     window.addEventListener("scroll", this.scroll);
-  },
-  mounted() {
+
     this.resize();
   },
   methods: {

diff --git a/App.vue b/App.vue
@@ -0,0 +1,28 @@
+<template>
+<div></div>
+</template>
+
+<script>
+export default {
+  created() {
+    window.addEventListener("resize", this.resize);
+    window.addEventListener("scroll", this.scroll);
+  },
+  mounted() {
+    this.resize();
+  },
+  methods: {
+    resize() {
+      this.$store.commit("resize", {
+        x: document.body.clientWidth,
+        y: window.innerHeight
+      });
+    },
+    scroll() {
+      this.$store.commit("scroll", window.pageYOffset);
+    }
+  }
+};
+</script>
+
+<style></style>
diff --git a/ScrollEffectBlock.vue b/ScrollEffectBlock.vue
@@ -0,0 +1,64 @@
+<template>
+<div>
+  <slot
+    :isIncludedScroll = "isIncludedScroll"
+  />
+</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      updateClientRectIterate: 0,
+      top: 0,
+      bottom: 0,
+      isIncludedScroll: false
+    };
+  },
+  watch: {
+    "$store.state.resolution"() {
+      this.updateClientRectIterate = 0;
+      this.updateClientRect();
+    },
+    "$store.state.scrollTop"() {
+      this.judgeBeIncludedScroll();
+    }
+  },
+  mounted() {
+    this.updateClientRect();
+  },
+  methods: {
+    updateClientRect() {
+      const rect = this.$el.getBoundingClientRect();
+      const top = this.$store.state.scrollTop + rect.top;
+
+      // ページロード直後はスクロールイベントが多発することがあるため、
+      // 正常に要素の位置を取得できない。
+      // なので数回位置情報取得の処理を実行して、
+      // 位置のズレがなくなったのを見越して要素の位置情報を確定とする。
+      if (this.updateClientRectIterate < 10) {
+        if (this.top === top) {
+          this.updateClientRectIterate++;
+        }
+        this.top = top;
+        requestAnimationFrame(this.updateClientRect);
+      } else {
+        this.bottom = top + rect.height;
+        this.judgeBeIncludedScroll();
+      }
+    },
+    judgeBeIncludedScroll() {
+      const { state } = this.$store;
+      if (
+        state.visibleAreaTop >= this.top &&
+        state.visibleAreaBottom <= this.bottom
+      ) {
+        this.isIncludedScroll = true;
+      }
+    }
+  }
+};
+</script>
+
+<style></style>
diff --git a/store.js b/store.js
@@ -0,0 +1,27 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    scrollTop: 0,
+    visibleAreaTop: 0,
+    visibleAreaBottom: 0,
+    resolution: {
+      x: 0,
+      y: 0
+    }
+  },
+  mutations: {
+    resize(state, { x, y }) {
+      state.resolution.x = x;
+      state.resolution.y = y;
+    },
+    scroll(state, scrollTop) {
+      state.scrollTop = scrollTop;
+      state.visibleAreaTop = state.scrollTop + state.resolution.y * 0.9;
+      state.visibleAreaBottom = state.scrollTop + state.resolution.y * 0.1;
+    }
+  }
+});