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()两次。第一个检测到了正确的方向，但第二个检测到它在同一个地方，所以它返回＆＃34; up＆＃34;，这就是你记录的内容。

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的答案解决了您当前的问题，但该解决方案无法帮助您构建代码，使您能够做两件事。

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

提高滚动效果。

// 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使用.on（）。

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

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

4 个答案: