1. 程式人生 > >H5 中監聽頁面滾動事件,判斷滾動方向的方法

H5 中監聽頁面滾動事件,判斷滾動方向的方法

在做 H5 開發的時候,有時候需要監聽頁面的滾動的事件,根據頁面滾動方向的不同來進行不同的操作,通常是判斷頁面是向上滾動還是向下滾動,那麼怎麼判斷呢,只需要使用下面的區區幾十行程式碼即可。

//監聽頁面滾動事件
function scrollEvent() {
    window.onscroll = function(e){
        scrollFunc();
        if(scrollDirection == 'down'){
            //頁面向下滾動要做的事情
        }
        else if(scrollDirection == 'up'){
            //頁面向上滾動要做的事情
} } } var scrollAction = {x: 'undefined', y: 'undefined'}, scrollDirection; function scrollFunc() { if (typeof scrollAction.x == 'undefined') { scrollAction.x = window.pageXOffset; scrollAction.y = window.pageYOffset; } var diffX = scrollAction.x - window.pageXOffset; var
diffY = scrollAction.y - window.pageYOffset; if (diffX < 0) { // Scroll right scrollDirection = 'right'; } else if (diffX > 0) { // Scroll left scrollDirection = 'left'; } else if (diffY < 0) { // Scroll down scrollDirection = 'down'; } else
if (diffY > 0) { // Scroll up scrollDirection = 'up'; } else { // First scroll event } scrollAction.x = window.pageXOffset; scrollAction.y = window.pageYOffset; }