Nuxt.js ページスクロール時に要素にclass付与
ページスクロールしてフェードしながら要素を出したいときなどに使う
公式ドキュメントにも書いてあるので、そこが一番参考になる。
plugins/scroll.js (v-scroll=""を使えるようにする。)
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)
}
})
pages/index.vue
<template>
<div>
<p v-scroll="handleScroll">要素</p>
</div>
</template>
export default {
methods: {
handleScroll: (evt, el) => {
let top = el.getBoundingClientRect().top;
if (window.scrollY > top + window.pageYOffset - 600) {
el.classList.add("isView");
return true;
}
return false;
},
}
これでisViewクラスがv-scrollをつけている要素にスクロールしたタイミングで付与される。発火する位置の調整は随時適当に変えてもいい。
この記事が気に入ったらサポートをしてみませんか?