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

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

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

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

当前回答

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

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

其他回答

你可以试试这样做。

function scrollDetect(){ var lastScroll = 0; window.onscroll = function() { let currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // Get Current Scroll Value if (currentScroll > 0 && lastScroll <= currentScroll){ lastScroll = currentScroll; document.getElementById("scrollLoc").innerHTML = "Scrolling DOWN"; }else{ lastScroll = currentScroll; document.getElementById("scrollLoc").innerHTML = "Scrolling UP"; } }; } scrollDetect(); html,body{ height:100%; width:100%; margin:0; padding:0; } .cont{ height:100%; width:100%; } .item{ margin:0; padding:0; height:100%; width:100%; background: #ffad33; } .red{ background: red; } p{ position:fixed; font-size:25px; top:5%; left:5%; } <div class="cont"> <div class="item"></div> <div class="item red"></div> <p id="scrollLoc">0</p> </div>

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

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

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

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

有时滚动行为不一致,不能正确更新元素的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

})

这是对prateek的回答的补充。在IE的代码中似乎有一个小故障,所以我决定修改它一点也不花哨(只是另一个条件)

$('document').ready(function() {
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       console.log("down")
   }
   else if(st == lastScrollTop)
   {
     //do nothing 
     //In IE this is an important condition because there seems to be some instances where the last scrollTop is equal to the new one
   }
   else {
      console.log("up")
   }
   lastScrollTop = st;
});});