[解決済み] DOM要素が現在のビューポートで表示されているかどうかを確認するにはどうすればよいですか？

質問

HTML ドキュメント内の）DOM 要素が現在表示されているかどうかを確認する効率的な方法はありますか？ ビューポート )?

(Firefoxでの質問です。）

解決方法を教えてください。

更新してください。 時は流れ、ブラウザも進化しています。 このテクニックはもう推奨されません を使用する必要があります。 ダンの解決策 Internet Explorer 7以前のバージョンに対応する必要がない場合。

オリジナルの解決策（現在は古くなっています）。

これは、現在のビューポートで要素が完全に表示されているかどうかをチェックします。

function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

これを単純に、要素のいずれかの部分がビューポートに表示されているかどうかを判断するように変更することもできます。

function elementInViewport2(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}