JavaScriptで要素が画面に表示されているかの判定

Vue.jsで要素のCSSアニメーションをつける際に「要素が画面に入ってきたら」という条件を判定したく、調査をして実装したのでそのまとめとなります。

elementの取得方法については今回はVue.jsの機能で取得していますが、document.getElementByIdなどで取得しても同様に動きます。

こちらのコンポーネントで実装しています。

// 画面最上部と要素の上端の距離
// こちらの値はスクロール値がすでに引いてある値となるので注意。
// 要するにこの値が0の場合要素の上端が画面の上端となっている状態
var positionY = this.$el.getBoundingClientRect().y
// 要素の縦幅
var clientHeight = this.$el.getBoundingClientRect().height
// 表示している画面の領域の高さ
var windowSize = window.innerHeight

/**
 * 画面上部の判定
 * 画面最上部との距離 + 要素サイズ > 0
 * = 画面上部に要素の一番下部が表示されているか
 * かつ
 * 画面下部の判定
 * 画面最上部との距離 < 画面サイズ
 * = 画面下部に要素の一番上部が表示されているか
 */
if (positionY + clientHeight > 0 && positionY < windowSize) {
  // 画面に要素が少しでも表示されている場合
} else {
  // それ以外
}

具体的には、下記のようにしています。

if (positionY + clientHeight > 0 && positionY < windowSize) {
  // 画面に要素が少しでも表示されている場合
  // 画面に表示されるclassを付与する
} else {
  // それ以外
  // 画面に表示されなくなるclassを付与する
}

表示だけでなく、様々なエフェクトをかけたい場合はここからさらにsetTimeoutなどの非同期処理で順を追ってclassを付与していくと良いと思います。