Mendeteksi Arah Gulungan Layar dengan JavaScript

Tabel Konten
  1. JavaScript 
  2. Contoh 
Google+
Google+

Saat menggunakan aplikasi Google+, tajuk dan navigasi di bagian atas dan bawah akan menghilang ketika Anda menggulung layar ke bawah, sebaliknya, ketika Anda menggulung layar ke atas, tajuk dan navigasi akan muncul kembali.

JavaScript 

var currentPageXOffset = 0,
    currentPageYOffset = 0;
window.addEventListener("scroll", function() {
    var X = this.pageXOffset,
        Y = this.pageYOffset;
    if (currentPageXOffset < X) {
        console.log('scroll right');
    } else if (currentPageXOffset > X) {
        console.log('scroll left');
    }
    if (currentPageYOffset < Y) {
        console.log('scroll down');
    } else if (currentPageYOffset > Y) {
        console.log('scroll up');
    }
    currentPageXOffset = X;
    currentPageYOffset = Y;
}, false);

Contoh 

Demonstrasi penggunaan deteksi arah gulungan layar untuk menentukan kapan elemen <header> dan <footer> harus ditampilkan atau disembunyikan:

Lihat Demo

Demonstrasi penggunaan deteksi arah gulungan layar untuk menciptakan efek seperti aplikasi Google+:

Lihat Demo

3 Komentar

  • Muhammad Nur Fuad

    Kalo yang header menghilang saat discroll ke bawah itu jadi fiturnya Material Design toolbar mas hehe, punya saya cuman tak aktifin di artikel aja. :D
    Oh iya kalo saya ngambil dari tinggi objectnya biar sesuai kalo ada perubahan akibat padding / height.

  • Kang Rian リアンさん

    Izin nyomot suhu..






Semua kode HTML akan dihapus kecuali kode-kode HTML yang dituliskan sebagai contoh. Gunakan sintaks Markdown untuk memberi gaya pada komentar.


Batal