12

我需要检测用户滚动的方向——“向上”或“向下”。基于此答案中找到的代码：如何确定 jQuery 滚动事件的方向？

我试图将它包装在一个函数中，这样它就更有区别了——但不幸的是，它不起作用。我认为这与我如何返回值有关，但方向始终是“向上”。作为 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。

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

4

4 回答 4

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

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

});

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

于 2013-03-07T06:47:15.990 回答
2

看看你得到了什么：

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

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

console.log(detectDirection());
于 2013-03-07T06:53:37.340 回答
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 作为向下滚动

希望对某人有所帮助。

于 2014-03-17T15:22:00.310 回答
1

我提供了一个新的答案，因为虽然 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');
})();

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

用于提高滚动性能的立即调用函数表达式 (IIFE)来自MDN 文档中的滚动事件。

于 2015-12-18T18:18:49.363 回答