jQuery/JavaScript：检测滚动方向 - 代码结构问题

Posted 2023-02-22

【中文标题】jQuery/JavaScript：检测滚动方向 - 代码结构问题

【英文标题】：jQuery/JavaScript: Detecting scroll direction - code structure issue

【发布时间】：2013-02-22 06:20:31

【问题描述】：

我需要检测用户滚动的方向——“向上”或“向下”。基于此答案中的代码：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。

您能帮我找出问题所在吗？

【问题讨论】：

我建议将您的函数和变量声明移到就绪函数之外。我不确定这是否能解决问题，但可能值得一试。

@AdamPlocher 感谢您的提示，但没有帮助。不过，这样做有什么普遍的优势吗？也许性能明智？

【参考方案1】：

我提供了一个新的答案，因为虽然 BarMar 的答案解决了您的直接问题，但该解决方案并不能帮助您以使您能够做两件事的方式构建代码。

更广泛地作用于滚动对象，允许您在其他地方访问它的属性。如果滚动位置是某个值，这将允许您执行某些操作。

提高滚动性能。

// 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');
)();

根据jQuery .bind() documentation，您应该使用.on()，而不是使用.bind()。

提高滚动性能的Immediately Invoked Function Expression (IIFE)来自MDN documentation for the scroll event。

【参考方案2】：

由于我们从不更新 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 作为向下滚动

希望对某人有所帮助。

【参考方案3】：

看看你得到了什么：

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

除了 Barmar 所说的之外，您可以去掉控制台输出上方的行（调用）并保留：

console.log(detectDirection());

【讨论】：

是的，你完全正确。我只是没有意识到console.log(detectDirection()); 实际上也调用该函数，尽管它实际上很清楚。

如果这是你唯一的 JS 错误，你会没事的 ;)

【参考方案4】：

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

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

);

您在每次滚动事件期间调用了两次detectDirection()。第一个检测到正确的方向，但第二个只是在同一个地方看到它，所以它返回“向上”，这就是您记录的内容。