Bagaimanakah Saya Boleh Mengesahkan Jika Elemen Kelihatan Selepas Tatal Halaman dengan JavaScript?

Mengesahkan Keterlihatan Elemen Selepas Menatal

Apabila memuatkan elemen secara dinamik melalui AJAX, memastikan keterlihatan mereka boleh mencabar, terutamanya jika ia hanya kelihatan selepas menatal halaman. Artikel ini meneroka kaedah untuk menentukan sama ada elemen berada dalam bahagian halaman yang boleh dilihat selepas menatal.

Penyelesaian: Semakan Keterlihatan JavaScript

Untuk mengesahkan keterlihatan elemen, kod JavaScript boleh diambil bekerja. Berikut ialah fungsi yang melaksanakannya:

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

Fungsi ini mengambil elemen sebagai input dan mengembalikan Boolean yang menunjukkan sama ada ia boleh dilihat.

Fungsi Utiliti Dipertingkat

Untuk pendekatan yang lebih serba boleh, pertimbangkan utiliti berikut fungsi:

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

Fungsi ini menerima dua parameter: elemen dan bendera pilihan yang menunjukkan sama ada elemen harus kelihatan sepenuhnya atau sebahagiannya.

Penggunaan

Untuk menggunakan fungsi, hanya buat contoh kelas Utils dan panggil kaedah isElementInView dengan elemen yang dikehendaki dan pilihan bendera:

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

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesahkan Jika Elemen Kelihatan Selepas Tatal Halaman dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!