動的にロードされた要素がスクロール後に表示されているかどうかを検出するにはどうすればよいですか?

スクロール後の要素の可視性の検出

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 サイトの他の関連記事を参照してください。