Mendeteksi Arah Gulungan Layar

Published by Concept Phone Rabu, 14 November 2018

Google+

Saat memakai aplikasi Google+, tajuk dan navigasi di bab atas dan bawah akan menghilang saat Anda menggulung layar ke bawah, sebaliknya, saat 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 memilih kapan elemen <header> dan <footer> harus ditampilkan atau disembunyikan:

Lihat Demo

Demonstrasi penggunaan deteksi arah gulungan layar untuk membuat pengaruh menyerupai aplikasi Google+:

Lihat Demo

Sumber https://www.dte.web.id/