javascript - html要素がブラウザウィンドウにあるかどうかを検出する方法は？

Question

重複の可能性：
DOM要素が現在のビューポートに表示されているかどうかを確認するにはどうすればよいですか？

画像を含むdivが1つしかないHTMLページがあります。

その要素が表示されているかどうか/ブラウザウィンドウにあるかどうかをどのように検出しますか？

Answer 1

私が正しく理解している場合は、画像がビューポートにあり、まだスクロールされていないかどうかを知りたいと思います。その場合、ビューポートと画像の高さを取得し、画像の位置とドキュメントの現在の位置を取得する必要があります。jqueryを使用している場合（タグからだと思います）、これを行うことができます：

var viewportHeight = $(window).height();
var imageOffset = $('img:first').offset().top;
var imageHeight = $('img:first').height;
var documentPosition = $(window).scrollTop();

var visibleArea = documentPosition + viewportHeight; //end of visible area
var imageArea = imageOffset + imageHeight;

if (documentPosition <= imageOffset && visibleArea >= imageArea) {
  //image is entirely visible
}

Answer 2

あなたは試すことができElement ‘in view’ Event Pluginます。