检测滚动方向

javascript scroll onscroll

2022-08-30 01:33:19

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

我正在考虑只是放一个“到顶部”按钮，但如果可以的话，我想避免这样做。

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

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

答案 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);

答案 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;
}