所以我试图使用JavaScript滚动调用一个函数。但是我想知道我是否可以不使用jQuery检测滚动的方向。如果没有,有什么变通办法吗?

我想只放一个“顶部”按钮,但如果可以的话,我想避免这个按钮。

我现在刚刚尝试使用这段代码,但它不起作用:

if document.body.scrollTop <= 0 {
    alert ("scrolling down")
} else {
    alert ("scrolling up")
}

当前回答

有时滚动行为不一致,不能正确更新元素的scrollTop属性。在决定滚动方向之前设置一些阈值会更安全。

let lastScroll = 0
let threshold = 10 // must scroll by 10 units to know the direction of scrolling


element.addEventListener("scroll", () => {
    let newScroll = element.scrollTop
    
    if (newScroll - lastScroll > threshold) {
        // "up" code here
    } else if (newScroll - lastScroll < -threshold) {
        // "down" code here
    }
    
    lastScroll = newScroll

})

其他回答

捕捉所有滚动事件(触摸和滚轮)的简单方法

window.onscroll = function(e) {
  // print "false" if direction is down and "true" if up
  console.log(this.oldScroll > this.scrollY);
  this.oldScroll = this.scrollY;
}

你可以使用document.documentElement.scrollTop获取滚动条的位置。然后就是简单地将它与之前的位置进行比较。

这段简单的代码可以工作:检查控制台的结果。

let scroll_position = 0;
let scroll_direction;

window.addEventListener('scroll', function(e){
    scroll_direction = (document.body.getBoundingClientRect()).top > scroll_position ? 'up' : 'down';
    scroll_position = (document.body.getBoundingClientRect()).top;
    console.log(scroll_direction);
});

虽然公认的答案是可行的,但值得注意的是,这将以很高的速率发射。对于计算成本高的操作,这可能会导致性能问题。

MDN的建议是限制这些事件。下面是他们的样例的修改,增强检测滚动方向。

修改自:https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event

// ## function declaration
function scrollEventThrottle(fn) {
  let last_known_scroll_position = 0;
  let ticking = false;
  window.addEventListener("scroll", function () {
    let previous_known_scroll_position = last_known_scroll_position;
    last_known_scroll_position = window.scrollY;
    if (!ticking) {
      window.requestAnimationFrame(function () {
        fn(last_known_scroll_position, previous_known_scroll_position);
        ticking = false;
      });
      ticking = true;
    }
  });
}

// ## function invocation
scrollEventThrottle((scrollPos, previousScrollPos) => {
    if (previousScrollPos > scrollPos) {
      console.log("going up");
    } else {
      console.log("going down");
    }
});

修改Prateek的答案,如果lastScrollTop没有变化,那么它将是一个水平滚动(在x方向溢出,可以使用鼠标使用水平滚动条或使用滚动轮+ shift来使用。

const containerElm = document.getElementById("container");

let lastScrollTop = containerElm.scrollTop;

containerElm.addEventListener("scroll", (evt) => {
  const st = containerElm.scrollTop;

  if (st > lastScrollTop) {
    console.log("down scroll");
  } else if (st < lastScrollTop) {
    console.log("up scroll");
  } else {
    console.log("horizontal scroll");
  }

  lastScrollTop = Math.max(st, 0); // For mobile or negative scrolling
});