スクロール後に要素が表示されているかどうかを確認するにはどうすればよいですか?

スクロール後の要素の可視性の確保

スクロール非表示要素の特定

AJAX 経由でコンテンツを動的にロードする場合、スクロールが実行されない限り、一部の要素が非表示のままになる場合があります。ページの現在表示されている部分内での可視性を判断することが重要になります。

解決策

スクロール後に要素が完全に表示されているか部分的に表示されているかを確認するには、次の関数を利用します:

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

拡張ユーティリティ関数

完全な可視性と部分的な可視性の両方をサポートするユーティリティ関数を導入しますチェック:

function Utils() {}

Utils.prototype = {
  constructor: Utils,
  isElementInView: function (element, fullyInView) {
    var pageTop = $(window).scrollTop();
    var pageBottom = pageTop + $(window).height();
    var elementTop = $(element).offset().top;
    var elementBottom = elementTop + $(element).height();

    if (fullyInView === true) {
      return ((pageTop < elementTop) && (pageBottom > elementBottom));
    } else {
      return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
    }
  }
};

拡張された使用法

このユーティリティ関数を使用してコードを拡張します:

var Utils = new Utils();

var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

if (isElementInView) {
  console.log('in view');
} else {
  console.log('out of view');
}

これらの関数を実装することで、スクロール後の要素の可視性を効果的に検出でき、それに応じて対応してください。

以上がスクロール後に要素が表示されているかどうかを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。