【Vue】特定要素の一番下までスクロールを行ったときの処理や判定はどうすればいい？

今回はスクロールで一番下まで行ったときにボタンを表示させる処理について解説を行って行きます。

ページ全体の一番下のまでスクロールしたときの処理はよく解説されていると思いますが、

要素内をスクロールしたときの処理の方法について解説していきます。

if (scrollHeight - (clientHeight + element.scrollTop) < 1) {
   // 一番下まで来たときの処理
}

環境とバージョンについて
全体のコード
一番下までスクロールしたか判定
まとめ

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

mac OS 11.2.3
エディタ　VSCode
node v14.8.0
- https://nodejs.org/ja/
npm 6.14.7
- https://www.npmjs.com/

全体のコード

<template lang="pug">
    .page-bottom-scroll
      h1 一番下までスクロールしたとき
      .scroll-section(ref="reference")
        section
          p section
        section
          p section
        section
          p section
        section
          p section
        section
          p section
        section
          p section
        section
          p section
        section
          p section
      button.btn.btn-primary(type='submit' v-show="isActive") Submit
  </template>
  
  <script>
  export default {
    data() {
      return {
        isActive: false,
      }
    },
    mounted() {
      const reference = this.$refs.reference
  
      const self = this
      reference.onscroll = function () {
        const element = self.$refs.reference
        const clientHeight = element.clientHeight
        const scrollHeight = element.scrollHeight
  
        // 一番下まで行ったかの判定
        if (scrollHeight - (clientHeight + element.scrollTop) < 1) {
          self.isActive = true
        }
      }
    },
  }
  </script>
  
  <style lang="stylus">
  .page-bottom-scroll
    .scroll-section
      border 1px solid #000
      width 50%
      height 500px
      margin 0 auto
      overflow-y scroll
      section
        min-height 500px
    button
      width: 200px
      height: 70px
      background: #fdcb6e
      border-radius: 100vh
      margin 0 auto
      margin-top: 30px
      display: block
  </style>

一番下までスクロールしたか判定

data() {
    return {
      isActive: false,
    }
  },
  mounted() {
    const reference = this.$refs.reference
  
    const self = this
    reference.onscroll = function () {
      const element = self.$refs.reference
      const clientHeight = element.clientHeight
      const scrollHeight = element.scrollHeight
  
      // 一番下まで行ったかの判定
      if (scrollHeight - (clientHeight + element.scrollTop) < 1) {
        self.isActive = true
      }
    }
  },

mountedのreference.onscrollの中で、thisを使うとうまくデータが書き換わらなかったので、selfにthisを代入することでうまくデータが変更されます。

要素の取得

const reference = this.$refs.reference

一番下までスクロールしたときの判定をしたい、要素の取得をします。

.scroll-section(ref="reference")
    section
      p section
  // 以下省略

reference内をスクロール下置きの処理を使いするので、refを設定

要素内でスクロールされたときのイベント

上記で取得した要素ないをスクロースしたときにイベントを発火させます。

reference.onscroll = function () {
  
    // 一番下までスクロールしたか判定の処理など
  
}

スクロール下置きのイベントを取得するときに、window.addEventListener('scroll', 関数名)

を使いますが、要素内をスクロールしたときのイベントは取れないので注意が必要です。

一番下までスクロールしたかの判定

// 「全体の高さ−（表示要素の高さ＋スクロール量）」
  
  if (scrollHeight - (clientHeight + element.scrollTop) < 1) {
      self.isActive = true
  }

一番下まで来たときに、isActiveにtrueを代入して、ボタンを表示させるようにします。

表示方法はv-showやv-ifなど状況に応じた方法で対応できます。

Vue スクロール位置にの取得方法

まとめ

要素の取得
要素内をしたときにイベントを取得
一番下まで行ったときの処理

3つの段階を踏んで一番下までスクロールしたときの処理を実装することができます。

Vue．js入門基礎から実践アプリケーション開発まで [ 川口和也 ]