vueでスクロール検知
公式のこれが一番手っ取り早い
code:js
Vue.directive('scroll', {
inserted: function (el, binding) {
let f = function (evt) {
if (binding.value(evt, el)) {
window.removeEventListener('scroll', f)
}
}
window.addEventListener('scroll', f)
}
})
こういうディレクティブを作る
v-scrollでメソッドに渡す
code:vue
<template>
<div id="app">
<h1 class="centered">Scroll me</h1>
<div class="box" v-scroll="handleScroll">
<p>Lorem ipsum dolor sit</p>
</div>
</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>
現在目の前にあるdivを見つけたい場合
判定したいdivに全部v-scroll入れて、
window.screen.heightとかと比較すればいい