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

我需要检测用户滚动的方向——“向上”或“向下”。根据此答案中的代码：

我试图将其封装在一个函数中，使其更具差异性—但不幸的是，它不起作用。我认为这与我如何返回值有关，但方向总是“向上”。由于对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());

    });

});

我还建立了一个

你能帮我找出问题所在吗

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

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

});

---

在每个滚动事件期间，您调用了两次

detectDirection（）

。第一个检测到了正确的方向，但第二个检测到了它在同一个位置，所以它返回“up”，这就是您记录的内容。

看看您从中得到了什么：

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

---

由于我们从未更新过最新的ScrollTop，因此现有的代码将无法工作，以下是工作代码

$(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;
    }`

$（函数（配置）{
var lastScrollTop=0，//将初始scrolltop设置为页面顶部
方向；//滚动方向1）向上-1）向下0）静态
函数检测方向（）{
//当前scrollTop无法缓存或在本地全局范围内
var st=window.pageYOffset；
如果（st>lastScrollTop）{
//向下滚动
方向=-1；
}否则如果（st

我使用0作为静态/1作为向上滚动/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');
})();

您应该使用.on（），而不是使用.bind（），如所示

---

提高滚动性能的方法来自。

我建议将您的函数和变量声明移到ready函数之外。我不确定这是否能解决问题，但可能值得一试。@AdamPlocher感谢您的提示，但没有帮助。不过，这样做有什么普遍的好处吗？可能是性能性能方面？是的，你完全正确。我只是没有意识到

console.log（detectDirection（））；

实际上也调用了这个函数，尽管它实际上非常清楚。如果这是你唯一的JS错误，你会没事的；）

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