Monday, November 12, 2012

JavaScript untuk Mengecek Batas Akhir Gulungan Layar

Kode ini digunakan untuk mengecek apakah pengguna telah mencapai bagian akhir halaman atau tidak saat mereka sedang menggulung layar. Jika ya, lakukan sesuatu:

JavaScript

window.onscroll = function() {
    if (navigator.userAgent.toLowerCase().indexOf("chrome") > -1 || navigator.userAgent.toLowerCase().indexOf("safari") > -1) {
        if (document.documentElement.scrollHeight == (document.body.scrollTop + document.documentElement.clientHeight)) {
            alert("End of the page!"); // for demonstration
        }
    } else {
        if (document.documentElement.scrollHeight == (document.documentElement.scrollTop + document.documentElement.clientHeight)) {
            alert("End of the page!"); // for demonstration
        }
    }
};

Demo

Catatan: Deklarasi <!DOCTYPE html> pada dokumen HTML harus dinyatakan.


Referensi: Stackoverflow: JavaScript Cross Browser Determine if User Scrolled to the Bottom of Page

Labels: , ,

5 Comments:

At Monday, November 12, 2012 at 5:16:00 PM GMT+7, Blogger IRIL SAGITA said...

Yang dimaksut lakukan sesuatu apa ni kak ?

 
At Monday, November 12, 2012 at 6:21:00 PM GMT+7, Blogger Taufik Nurrohman said...

Apa saja. Misalnya untuk menampilkan kotak pesan saat gulungan layar telah berakhir seperti ini, atau bisa juga dimanfaatkan sebagai indikator untuk memulai pemuatan data baru setiap kali gulungan layar berakhir.
Pernah melihat cara kerja penundaan muatan status dari Facebook Time-Line dan halaman hasil penelusuran gambar Google kan? :)

 
At Tuesday, November 13, 2012 at 6:25:00 AM GMT+7, Blogger IRIL SAGITA said...

owww gitu ya kak, berarti yang di daftar isi buku hompimpa juga memakai ini kah ?

 
At Saturday, July 13, 2013 at 5:17:00 AM GMT+7, Blogger Unknown said...

Mas kalo cara mebuat Infinite Ajax Scroll, a jQuery plugin Bagaimana.. share dong

 
At Sunday, July 14, 2013 at 8:37:00 PM GMT+7, Blogger Taufik Nurrohman said...

/2013/04/membuat-navigasi-halaman-ajax-pada.html

 

Post a Comment

<< Home