ウェブサイト作りながら少し成果上がったので公開していくことにする。作ったのはスクロールして画面内に入ったらクラス付加するやつ。簡単な例だけどメモとして。
まずvueファイル。
// in-screen.vue
<template>
<div v-bind:class="{active: isInScreen}">
<slot></slot>
</div>
</template>
<script>
export default {
props : {
offset:{
type: Number,
default: 0
}},
data() {
return {
scrollY: 0,
height: 0,
position: 0,
}
},
mounted() {
window.addEventListener('scroll', this.onScroll)
window.addEventListener('resize', this.onResize)
window.addEventListener('load', ()=> {
this.onScroll()
this.onResize()
})
},
computed:{
isInScreen(){
if(this.scrollY > this.position + this.offset){
return true
}else{
return false
}
}
},
methods: {
onScroll () {this.scrollY = window.pageYOffset},
onResize () {this.height = document.documentElement.clientHeight} ,
getPosition () {
if(this.$el){
return this.$el.getBoundingClientRect().top +
this.scrollY -
this.height
}else{
return 0
}
},
}
}
</script>
isInScreenを算出プロパティとして定義させて必要な時に再取得させる。んだけど他のスクロール量とかはリアクティブに出来ないのかな。要検討。CSS書いてないけどのファイル内でのスコープ限定して書けるらしい。んで動かすのがこれ。
import Vue from 'vue'
import InScreen from './in-screen.vue'
const sweetScroll = new SweetScroll();
new Vue({
el: '#app',
components: {
"in-screen": InScreen,
},
})
コンポーネントごとにファイルまとめられるのでいい感じがする。JSfiddleで動作でも作って貼り付けたかったけど、単一ファイルコンポーネントの動かし方がいまいちよーわからんかったので割愛。サイトで使ったコンポーネントはどんどん上げていきたい。