Saturday, September 22, 2018

Mendeteksi Arah Gulungan Layar dengan JavaScript

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

Labels: ,

3 Comments:

At Wednesday, September 26, 2018 at 12:34:00 PM GMT+7, Blogger illvart said...

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.

 
At Thursday, October 4, 2018 at 7:03:00 PM GMT+7, Blogger Beben Koben said...

iya seperti itu =p*

 
At Monday, May 13, 2019 at 3:27:00 PM GMT+7, Blogger Kang Rian said...

Izin nyomot suhu..

 

Post a Comment

<< Home