Mendeteksi Arah Gulungan Layar dengan JavaScript

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