Vuejsでスクロール下までいかないと利用規約に同意できないようにする仕組み

まえがき

• 利用規約など、全てを読み終えてほしいためスクロールで一番下までいかないと次に進めないという処理を入れたいときどうするか

前提

• 以下のコードは参考程度なので適宜変えてください
  • 改行など
  • ボタンのbindする変数など

できるようになること

• 長い文章を一番下までスクロールしたときに、ボタンを有効にするという処理を入れられる
• スクロールする文章がない場合は、初めからボタンを有効にするという処理を入れられる

手順

• html部分の中

<template>
  <div class="scroll_area">
    ここに文章を入力する
  </div>
  // 何かしらのボタンで有効にする変数をbindする
  <v-button>
  </v-button>
</template>

• js部分の中

  mounted () {
    window.addEventListener('scroll', this.checkScrollArea, {
      capture: true
    })
    const scrollAreaElement = document.querySelector('.scroll_area')
    const scrollAreaScrollHeight = scrollAreaElement.scrollHeight
    const scrollAreaClientHeight = scrollAreaElement.clientHeight
    // スクロールするテキストが少なくてスクロールできない場合に対応
    if (scrollAreaScrollHeight === scrollAreaClientHeight) {
      this.isDisabledButton = false
    }
  },

  destroyed () {
    window.removeEventListener('scroll', this.checkScrollArea, {
      capture: true
    })
  },
  methods: {
     checkScrollArea () {
      const scrollAreaElement = document.querySelector('.scroll_area')
      const scrollAreaScrollTop = scrollAreaElement.scrollTop
      const scrollAreaScrollHeight = scrollAreaElement.scrollHeight
      const scrollAreaClientHeight = scrollAreaElement.clientHeight
      if (scrollAreaScrollHeight - scrollAreaScrollTop <= scrollAreaClientHeight) {
        // ここにボタンを有効にする変数などを変える処理をいれる。
        this.isDisabledButton = false
      }
    },
  }

• CSS部分の中

.scroll_area {
  overflow-y: scroll;
}

参考

• https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight