【Vue】【JavaScript】スクロールのイベントを検知する方法！

あきぞらです。

Vue.jsで開発をしていて、スクロールイベントを検知したいときがありました。

今回はその方法を紹介していきます。

window.addEventListenerでスクロールイベントを検知

window.addEventListenerを使って、スクロールイベントを検知します。

export default {
  mounted () {
    window.addEventListener('scroll', this.execTest)
  },
  methods: {
    execTest: function () {
      console.log(window.innerHeight)
    }
  },
}

上では、window.addEventListener('scroll', this.execTest)のところで、

スクロールイベントを検知し、execTestという関数を呼び出しています。

画面上でスクロールによって処理を動かしたり、

何か値を計算したりするときに便利です！