Bagaimanakah Saya Boleh Menentukan sama ada Elemen yang Dimuatkan Secara Dinamik Kelihatan Selepas Menatal?

Menentukan Keterlihatan Elemen Selepas Tatal

Apabila memuatkan elemen secara dinamik melalui AJAX, memastikan ia boleh dilihat oleh pengguna boleh menjadi penting. Dalam kes di mana elemen hanya kelihatan selepas menatal ke bawah halaman, pembangun mungkin mendapati diri mereka tertanya-tanya bagaimana untuk menentukan status keterlihatan semasa elemen.

Satu penyelesaian berkesan untuk masalah ini terletak pada penggunaan fungsi JavaScript yang menyemak sama ada elemen itu dalam ruang pandang. Fungsi ini mengambil kira kedua-dua kedudukan elemen pada halaman dan kedudukan skrol semasa pengguna.

Pelaksanaan JavaScript

Kod JavaScript berikut menyediakan penyelesaian komprehensif untuk menyemak keterlihatan elemen:

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

Sebagai alternatif, untuk fungsi utiliti yang lebih serba boleh, pertimbangkan ini pendekatan:

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 menggunakan fungsi ini, cuma sediakan elemen yang ingin anda semak sebagai hujah. Untuk semakan keterlihatan separa, gunakan false sebagai hujah kedua, manakala untuk semakan keterlihatan penuh, gunakan benar.

Sebagai contoh:

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

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

Dengan menggunakan teknik ini, pembangun boleh memantau keterlihatan elemen dengan berkesan , memastikan pengalaman pengguna yang optimum dan paparan kandungan yang berkaitan.

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