Vue でスクロールイベントを作成する | Vue3（Options API）

概要

Vue でウェブアプリケーションを構築しているときに、ユーザのスクロールを検知してトップへ戻るボタンを表示したり、メニューバーを表示/非表示したりと、やることが多かったので、その時のメモ。

コード

App.vue

export default {
  data() {
    return {
      lastScrollY: 0, // 前回のスクロール位置
    };
  },
  methods: {
    handleScroll() {
      const currentScrollY = window.scrollY; // 現在のスクロール位置

      if (currentScrollY <= 100) {
        // ページ上部で実行するもの
      } else if (currentScrollY < this.lastScrollY) {
        // スクロールアップした場合に実行するもの
      } else {
        // スクロールダウンした場合に実行するもの
      }
      this.lastScrollY = currentScrollY; // スクロール位置を記録
    },
  },
  mounted() {
    // スクロールイベントをリッスン
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeUnmount() {
    // コンポーネント破棄時にイベントリスナーを削除
    window.removeEventListener('scroll', this.handleScroll);
  },
};