检测滚动方向

Question

所以我试图 on scroll 上使用 JavaScript 来调用一个函数。但我想知道是否可以在不使用 jQuery 的情况下检测滚动的方向。如果没有，那么有什么解决方法吗？

我正在考虑只放置一个“顶部”按钮，但如果可以的话，我想避免这种情况。

我现在刚刚尝试使用此代码，但它不起作用：

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

原文由 dwinnbrown 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

可以通过存储之前的 scrollTop 值并将当前的 scrollTop 值与它进行比较来检测它。

JavaScript：

 var lastScrollTop = 0;

 // element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
 element.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
 var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
 if (st > lastScrollTop){
 // downscroll code
 } else {
 // upscroll code
 }
 lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
 }, false);

原文由 Prateek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

捕获所有滚动事件的简单方法（触摸和滚轮）

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

原文由 IT VLOG 发布，翻译遵循 CC BY-SA 3.0 许可协议