【javascript】特定の要素が画面に見えているかどうかを判定する方法メモ

はじめに

今回やりたかったのは特定の要素が画面に見えていたら何か処理をするということ。
要素が全て見えている場合と50%以上みえてるときを検知できるような想定

実装

全て見えているかを判定

var target = document.getElementById("target");
var offsetY = target.getBoundingClientRect().top;
var viewportHeight = getViewportHeight();
var style = target.currentStyle || document.defaultView.getComputedStyle(target, '');
var height = parseInt(style.height);

if (0 < offsetY && offsetY + height < viewportHeight) {
    // 見えてる
} else {
    // 見えてない
}

function getViewportHeight()
{
    var height = window.innerHeight;
    if (!height) {
        var mode = document.compatMode;
        if (mode) {
            var domObject = mode == "CSS1Compat" ? document.documentElement : document.body;
            height = domObject.clientHeight;
        }
    }
    return height;
}

50%以上みえているか判定

var target = document.getElementById("target");
var offsetY = target.getBoundingClientRect().top;
var viewportHeight = getViewportHeight();
var style = target.currentStyle || document.defaultView.getComputedStyle(target, '');
var height = parseInt(style.height)/2;
var isVisible;

if (0 < offsetY && offsetY + height < viewportHeight)
    isVisible = true;
else if (offsetY < 0 && Math.abs(offsetY) < height)
    isVisible = true;
else
    isVisible = false;

if (isVisible) {
  // 見えてる
} else {
  // 見えてない
}

おわりに

これらの処理をsetIntervalで定期的に監視しておけばとりあえずやりたいことはできました。
以上です