プラウダ

モスクワの報道は三つのカテゴリーにわかれている。すなわち「真実」「たぶん真実」及び「真実性のないもの」の三つである。 第一のカテゴリーには時報、第二のカテゴリーには天気予報、そして第三のカテゴリーには他の全てが含まれている。

Vue.jsでスクロール範囲内に入るとクラス付加するやつ

ウェブサイト作りながら少し成果上がったので公開していくことにする。作ったのはスクロールして画面内に入ったらクラス付加するやつ。簡単な例だけどメモとして。

まず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書いてないけどのファイル内でのスコープ限定して書けるらしい。んで動かすのがこれ。

// app.js
import Vue from 'vue'
import InScreen from './in-screen.vue'

const sweetScroll = new SweetScroll();
new Vue({
  el: '#app',
  components: {
    "in-screen": InScreen,
  },
})

コンポーネントごとにファイルまとめられるのでいい感じがする。JSfiddleで動作でも作って貼り付けたかったけど、単一ファイルコンポーネントの動かし方がいまいちよーわからんかったので割愛。サイトで使ったコンポーネントはどんどん上げていきたい。