Vue.js カスタムディレクティブ(スクロール処理)について

Question

カスタムディレクティブ（スクロール処理）の使い方について質問です。

ふわっと出現させたい要素にそれぞれv-scrollを付与しそれぞれのタイミングでcss等が付与される処理を作りたく公式ドキュメントを触って見たのですが(https://jp.vuejs.org/v2/cookbook/creating-custom-scroll-directives)、
一番上に付与したv-scroll要素が判定に入るたびに全ての要素にcssが付与されてしまいます。

各要素それぞれのタイミングでcssを付与するにはどのように書けば良いのでしょうか。

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)
    }
})

各p要素には上下にmargin100px程度あるとします。
現時点でhoge1にスクロールしたタイミングでhoge4まで全てcssが適用されるので、これを各々のタイミングで処理したいです。

<template>
 <div>
  <p v-scroll="handleScroll">hoge1</p>
  <p v-scroll="handleScroll">hoge2</p>
  <p v-scroll="handleScroll">hoge3</p>
  <p v-scroll="handleScroll">hoge4</p>
 </div>
</template>
<script>
  export default {
    methods: {
      handleScroll: function (evt, el) {
        if (window.scrollY > 50) {
          el.setAttribute(
            'style',
            'opacity: 1; transform: translate3d(0, -10px, 0)'
          )
        }
        return window.scrollY > 100
      }
    }
  }
</script>

nuxt.config.jsでpluginとして読み込んでいます。

plugins:[
  '~plugins/scroll.js'
]

Comments

[NozomuIkuta]

https://teratail.com/help/question-tips#questionTips3-5-1にあるように、ソースコードを記載していただくと、回答がつきやすくなると思います。

[okpk]

アドバイスありがとうございます。取り急ぎコードの追記をさせて頂きました。

Answer 1

スタイルを変更する判定部分が、静的な値になっていることが原因です。handleScroll()はスクロールのたびに4回呼ばれますが、window.scrollY > 50を満たした時点で4つ全ての要素のスタイルが変更されます。

要素のY座標に基づいてスタイル変更の条件を設定するようにすれば解決します。

簡易的なものですが、サンプルを用意したので、確認してみてください。
jQueryを使えるかわからなかったので、ただのJavaScriptで要素のY座標を取得するようにしています。

Comments

[okpk]

サンプルまで用意して回答して頂きありがとうございます。
50のような数値でなく各要素のtop値を取得しそれを条件にすれば各々のタイミングに切り替わるのですね。
理想の挙動になりました。

[NozomuIkuta]

解決したようでよかったです。