javascriptで要素の一番下までスクロールされたことを検知するスニペット

こんにちは！

今回はhtmlの要素が全部閲覧されたか？つまり一番下までスクロールされたかを判定するjavascriptのスニペットです。
素のjavascript版とvue.js版での実装をサンプルコード付きでご紹介します。
利用規約やプライバシーポリシーなど、最後まで読んでもらったことを確認してから同意したい場合などに使えると思います。

お役に立てると嬉しいです！

目次

1. サンプルコード
2. 説明
3. まとめ

サンプルコード

javascript版とvue.js版で以下の通りです。

javascript版

document.getElementById('something-id').onscroll = event => {
  if (isFullScrolled(event)) {
    // 一番下までスクロールした際の処理
  }
}

function isFullScrolled(event) {
  // ブラウザの設定にもよるので、完全に一番下までいっていなくても許容するための調整値
  const adjustmentValue = 60
  const positionWithAdjustmentValue = event.target.clientHeight + event.target.scrollTop + adjustmentValue
  return positionWithAdjustmentValue >= event.target.scrollHeight
}

vue.js版

typescript版

<template>
// 略
  // styleはお好みで。
  <div @scroll="onScrollSomething" style="height: 200px; overflow: scroll;">
    // 一番下までスクロールしたい要素
  </div>
// 略
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class SomethingComponent extends Vue {
  // 略
  onScrollSomething(event: any) {
    if (this.isFullScrolled(event)) {
      // 一番下までスクロールした際の処理
    }
  }

  // javascript版と全く同じです
  isFullScrolled(event: any): boolean {
    // ブラウザの設定にもよるので、完全に一番下までいっていなくても許容するための調整値
    const adjustmentValue = 60
    const positionWithAdjustmentValue =
      event.target.clientHeight + event.target.scrollTop + adjustmentValue
    return positionWithAdjustmentValue >= event.target.scrollHeight
  }
  // 略
}
</script>

通常版

<template>
// 略
  // styleはお好みで。
  <div @scroll="onScrollSomething" style="height: 200px; overflow: scroll;">
    // 一番下までスクロールしたい要素
  </div>
// 略
</template>

<script>
export default {
  // 略
  methods: {
    onScrollSomething(event) {
      if (this.isFullScrolled(event)) {
        // 一番下までスクロールした際の処理
      }
    },
    // javascript版、vue.js（typescript）版と同じため略
    isFullScrolled(event){},
  },
  // 略
}
</script>

以上です。

説明

ポイント

ポイントはisFullScrolled関数で利用している以下の値です。

• event.target.scrollHeight
• event.target.clientHeight + event.target.scrollTop
• adjustmentValue

念の為isFullScrolled関数を再掲しておきます。中身は上記のサンプルと全く同じです。

  isFullScrolled(event: any): boolean {
    // ブラウザの設定にもよるので、完全に一番下までいっていなくても許容するための調整値
    const adjustmentValue = 60
    const positionWithAdjustmentValue =
      event.target.clientHeight + event.target.scrollTop + adjustmentValue
    return positionWithAdjustmentValue >= event.target.scrollHeight
  }

event.target.scrollHeight

スクロールイベントが発生している要素の高さが返ります

event.target.clientHeight + event.target.scrollTop

スクロールイベントが発生している要素の現在の位置が返ります

adjustmentValue

これは独自にいれているので、利用されなくても大丈夫です。
ブラウザのズーム倍率を100%以外にしている場合に、一番下までスクロールしていても正しくスクロール完了を判定できなかったので追加しました。
値は60と決め打ちしている位なので、使ってみて調整ください。

「完全に一番下までスクロールしていない一歩手前で、スクロール完了判定がされる。」実装になっています。
これが嫌な場合は以下の通り実装すれば良さそうです。

  isFullScrolled(event: any): boolean {
    return event.target.clientHeight + event.target.scrollTop === event.target.scrollHeight
  }

まとめ

以上、javascriptで要素の一番下までスクロールされたことを検知するスニペットでした。
各イベントで取れる値の内容さえわかってしまえばとても簡単に実装できそうですね。

以下参考にしたサイトです。

• Check if a user has scrolled to the bottom – Stack Overflow