jQuery/JavaScript：檢測滾動方向 - 代碼結構問題

Question

我需要檢測用戶滾動的方向 - 「向上」或「向下」。基於在這個答案中找到的代碼：How can I determine the direction of a jQuery scroll event?

我試圖把它包裝在一個函數，所以它有點差異 - 但不幸的是，它不工作。我認爲這與我如何回報價值有關，但方向總是「向上」。相當新的JavaScript，我有問題解決這個問題。

下面是代碼：

$(document).ready(function() { 

    'use strict'; 

    var lastScrollTop = 0, 
     st, 
     direction; 

    function detectDirection() { 

     st = window.pageYOffset; 

     if (st > lastScrollTop) { 
      direction = "down"; 
     } else { 
      direction = "up"; 
     } 

     lastScrollTop = st; 

     return direction; 

    } 

    $(window).bind('scroll', function() { 

     detectDirection(); 
     console.log(detectDirection()); 

    }); 

}); 

而且我還設置了一個Fiddle。

你能幫我找出問題所在嗎？

Answer 1

$(window).bind('scroll', function() { 

    var dir = detectDirection(); 
    console.log(dir); 

}); 

您在每個滾動事件中調用detectDirection()兩次。第一個檢測到正確的方向，但第二個檢測到它在同一個地方，所以它返回「上」，這就是你記錄的。

Answer 2

看你這得到什麼：

if (st > lastScrollTop) { 
    direction = "down"; 
} else if (st < lastScrollTop){ 
    direction = "up"; 
} else { 
    direction = "static"; 
} 

除了什麼Barmar說，你可以擺脫控制檯輸出及以上線路（通話）的自顧自地：

console.log(detectDirection()); 

Answer 3

的代碼，因爲它是不會工作，因爲我們從來沒有更新lastScrollTop，這裏是工作的代碼...

$(function(config){ 
    var lastScrollTop = 0, // setting initial scrolltop as top of page 
     direction; // direction of scroll 1)up -1)down 0)static 

    function detectDirection() { 
     // current scrollTop can't be cached or in the local global scope 
     var st = window.pageYOffset; 

     if (st > lastScrollTop) { 
      // scrolling down 
      direction = -1; 
     } else if (st < lastScrollTop){ 
      // scrolling up 
      direction = 1; 
     } else { 
      // static 
      direction = 0; 
     } 

     // updated lastscrolltop with new current top 
     lastScrollTop = st; 

     // return the direction 
     return direction; 
    }` 

我使用0作爲靜態/ 1作爲向上滾動/ -1作爲向下滾動

希望能夠幫助某人。

Answer 4

我提供了一個新的答案，因爲雖然BarMar的答案解決了您的直接問題，但該解決方案無法幫助您以可讓您做兩件事的方式構建代碼。

1. 範圍更廣泛的滾動對象，允許您訪問其他地方的屬性。如果滾動位置是特定值，這將允許您執行某些操作。

2. 提高滾動的性能。

   // Your current functionality 
   $(document).ready(function() { 
       var scroll = { 
       down: true, 
       pos: 0 
       }; 
       var scrollPos; 
   
       var detectDirection = function() { 
       scrollPos = window.pageYOffset; 
   
       if (scrollPos > scroll.pos) { 
        scroll.down = true; 
       } else { 
        scroll.down = false; 
       } 
   
       scroll.pos = scrollPos; 
       }; 
   
       $(window).on('optimizedScroll', function() { 
       detectDirection(); 
   
       // Do something based on scroll direction 
       if (scroll.down == true) { 
        // fooFunction(); 
       } else { 
        // barFunction(); 
       } 
   
       // Do something based on scroll position, 
       // where scrollTrigger is a number 
       if (scroll.pos > scrollTrigger) { 
        // bazFunction(); 
       } 
       }); 
   }); 
   
   // Improve scroll performance 
   (function() { 
       var throttle = function(type, name, obj) { 
        var obj = obj || window; 
        var running = false; 
        var func = function() { 
        if (running) { 
         return; 
        } 
        running = true; 
        requestAnimationFrame(function() { 
        obj.dispatchEvent(new CustomEvent(name)); 
         running = false; 
        }); 
        }; 
        obj.addEventListener(type, func); 
       }; 
   
       throttle('scroll', 'optimizedScroll'); 
   })(); 
   

而不是使用.bind（），你應該使用。對（），按照該jQuery .bind() documentation。

提高滾動性能的Immediately Invoked Function Expression (IIFE)來自MDN documentation for the scroll event。