Bagaimana untuk Mengesan Apabila Pengguna Telah Tatal ke Bahagian Bawah Halaman Web?

Menentukan Kedudukan Tatal Tetingkap Penyemak Imbas

Dalam pembangunan web, selalunya perlu untuk mengesan sama ada pengguna telah sampai ke bahagian bawah halaman web. Ini membolehkan pemuatan kandungan automatik atau tindakan lain berdasarkan kedudukan tatal.

Cara Mengesan Tatal Akhir

Untuk menentukan sama ada pengguna telah menatal ke bawah daripada halaman, anda boleh menggunakan pendengar acara window.onscroll. Peristiwa ini berlaku setiap kali pengguna menatal halaman, membolehkan anda menjejaki kedudukan tatal dalam masa nyata.

Coretan kod JavaScript berikut menunjukkan cara untuk mengesan penghujung tatal:

window.onscroll = function(ev) {
    if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

Kod ini mengira ketinggian skrol semasa, iaitu jumlah ketinggian viewport (ditentukan oleh window.innerHeight) dan offset skrol semasa (dikira dengan Math.round(window.scrollY)). Ia kemudian membandingkan nilai ini dengan jumlah ketinggian dokumen, yang diperoleh menggunakan document.body.offsetHeight. Jika ketinggian skrol yang dikira ini lebih besar daripada atau sama dengan ketinggian dokumen, ini menunjukkan bahawa pengguna berada di atau berhampiran bahagian bawah halaman.

Demo

The kod yang disediakan boleh digunakan dalam kombinasi dengan kaedah Element.scrollIntoView() untuk menatal pengguna secara automatik ke bahagian bawah elemen apabila kandungan tambahan ditambah.

Untuk contoh dunia sebenar bagi fungsi ini, sila rujuk demo berikut:

[Pautan Demo]

Dengan melaksanakan kod ini, anda boleh menjejaki dengan berkesan tatal kedudukan dan lakukan tindakan yang diingini, seperti memuatkan kandungan baharu atau mengubah tingkah laku halaman, apabila pengguna mencapai bahagian bawah halaman web.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Apabila Pengguna Telah Tatal ke Bahagian Bawah Halaman Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!