检测滚动方向

一尘不染

检测滚动方向

javascript

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

我本来只是想放一个“置顶”按钮，但我想避免这种情况。

我现在刚刚尝试使用此代码，但是没有用：

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

阅读 260

2020-05-01

共1个答案

一尘不染

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

JS：

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

2020-05-01