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

【问题标题】：jQuery/JavaScript: Detecting scroll direction - code structure issuejQuery/JavaScript：检测滚动方向 - 代码结构问题
【发布时间】：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 感谢您的提示，但没有帮助。不过，这样做有什么普遍的优势吗？也许性能明智？

标签： javascript jquery scroll return code-structure

【解决方案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()。第一个检测到正确的方向，但第二个只是在同一个地方看到它，所以它返回“向上”，这就是您记录的内容。

【讨论】：