Bagaimanakah Saya Boleh Mengesan jika Elemen Dimuatkan Secara Dinamik Kelihatan Selepas Menatal?

Mengesan Keterlihatan Elemen selepas Menatal

Untuk elemen yang dimuatkan secara dinamik menggunakan AJAX, menentukan keterlihatan mereka dalam port pandangan boleh menjadi penting. Ini amat relevan untuk elemen yang muncul selepas menatal. Berikut ialah kaedah yang berkesan untuk menangani isu ini:

Menggunakan Fungsi Tersuai:

Fungsi berikut menyemak sama ada elemen kelihatan dalam port pandangan semasa:

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));
}

Menggunakan Fungsi Utiliti:

Lagi pilihan serba boleh ialah menggunakan fungsi utiliti yang menawarkan penyesuaian:

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();

Penggunaan:

Untuk menentukan sama ada elemen kelihatan, cuma panggil fungsi ini:

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

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

Dengan melaksanakan kaedah ini, anda boleh mengesan keterlihatan elemen yang dimuatkan secara dinamik dengan mudah, mendayakan interaksi halaman yang dioptimumkan dan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan jika Elemen Dimuatkan Secara Dinamik Kelihatan Selepas Menatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!