【Nuxt】vue.jsでスクロール位置を取得する方法を解説！methodとmountedを使って実装

下記の記述で変数に追加してあげれば取得可能です。

 変数　＝ window.scrollY

簡単ですね！あとは、どのタイミングで取得するかの設定を行うだけです。

環境とバージョンについて


data() {
  return {
      scrollY: 0,
  }
},
methods: {
  getScroll() {
      this.scrollY = window.scrollY
  }
}

現在のスクロール位置を表示するために、dataを準備し、次に関係を準備し用意したdataにスクロールの位置を代入します。

ただ上記だけだと、どこでも関数を呼び出していないので、スクロールの位置を取得することができません。

なので、スクロールのするたびに関数を呼びだす処理を追記しましょう。


mounted() {
  window.addEventListener("scroll", this.getScroll)
},

mountedの中に、スクロールをするたびに関数を呼び出すようにしています。

htmlについてはpugを使用しているので、コピペしたい人は下記のサイトでhtmlへ変換して使ってください。

また、nuxtでpugを使用したい人については別の記事でまとめているので参考にしてみてください。


div
  .scroll-position スクロール位置の取得 : {{ scrollY }}

表示に必要なのはこれだけです。

関数で取得したものをdataに代入し、代入した値を表示させる流れになってます。

上記はcssをつけていないので、このまま使うとスクロールができないのでスクロール位置の取得ができませんので、スタイルの調整を行ってください。

表示を確認して、スクロール位置が表示されていれば完成です。

vueを使うことで簡単にスクロール位置の取得をすることができます。

今回はスクロールするたびに位置を取得しましたが、スクロールするたびに、関数を呼び出すとサイトが重たくなったりするので、臨機応変に使い分けることをお勧めします。