Help us understand the problem. What is going on with this article?

Vue スクロールを検知してDOM要素を消す(非表示)

やりたいこと

横のスクロールを検知し、スクロールできなくなった所で、ある要素を消す。
下記の記事が参考になるので飛んでください✈️

どうやるか?

①ref属性を使い、DOM要素にアクセスできるようにする。
②スクロールイベントを追加する。
③イベント発火時の処理を書く。

コード

<template>
  <div>
    <card ref="content">
       <button v-show="visibleButton"></button>
    </card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visibleButton: false
    };
  },

  // DOMの生成が完了後(ref属性が割り当てられるのを待つ)、スクロールイベントを追加する
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
    this.$refs.content.addEventListener('scroll', this.handleScroll);
  },

  // インスタンス破棄時に、イベントも削除する
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
    this.$refs.content.removeEventListener('scroll', this.handleScroll);
  },

  methods: {
    /**
     * スクロールした際に、$ref.contentのwidthを取得し、ボタンの表示・非表示を制御する
     */
    handleScroll() {
      this.$refs.content.scrollLeft <= 0
        ? (this.visibleButton = false)
        : (this.visibleButton = true);
    }
  }
};
</script>

参考資料

ref属性の主な目的は、親の$ refs属性のキーとしてDOM要素を選択可能にすることです。
たとえば、ref = “input”を指定したinput要素は、親としてDOM要素を公開します(ここではcurrency-> input thisです)。 。

(引用の引用)
- 【Vue.js】スクロールでDOM操作する(消えるタイトル編) すごく参考になりました🙇‍♂️
- Vue Scroll Sample すごく参考になりました🙇‍♀️

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away