[jQuery]あるDOMが表示されたときにイベントを発生させるinviewプラグイン

あるdom要素が表示領域内に入ったときにイベントを発火したい場合があります。

そんな場合は、inviewプラグインが便利そう。

バシャログの【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグインとは別にdomのすべてが表示領域内に入った場合は、このように実装することもできる。

$(someMyOneDiv).on('inview', function(e, isInView, visiblePartX, visiblePartY) {
  var elem = $(this);

  if (elem.data('inviewtimer')) {
    clearTimeout(elem.data('inviewtimer'));
    elem.removeData('inviewtimer');
  }

  if (isInView) {
    elem.data('inviewtimer', setTimeout(function() {
      if (visiblePartY == 'top') {
        elem.data('seenTop', true);
      } else if (visiblePartY == 'bottom') {
        elem.data('seenBottom', true);
      } else {
        elem.data('seenTop', true);
        elem.data('seenBottom', true);
      }

      if (elem.data('seenTop') && elem.data('seenBottom')) {
        elem.unbind('inview');
        //ここに処理を書く
      }
    }, 1000));
  }
});

ただし、これは、1秒後にチェックしているので、間隔を狭くすることでより精度が高い状態でイベントを発生させることができる。