カスタムスクロールディレクティブの作成 — Vue.js

最終更新日: 2018年3月20日 基本的な例Web サイト上でスクロールイベントと連動するアニメーションなど、ちょっとした振る舞いを加えたくなる時は多くあります。やり方は多くありますが、最も少ないコード量と依存で実現できる方法はおそらく、特定のスクロールイベントを発火させるフックを作成する、カスタムディレクティブを使用することでしょう。 Vue.directive('scroll', { inserted: function (el, binding) { let f = function (evt) { if (binding.value(evt, el)) { window.removeEventListener('scroll', f) } } window.addEventListener('scroll', f) } }) // main app new Vue({ el: '

[extendskick]

scroll animation

[hirorock]

カスタムスクロールディレクティブの作成