如何确定jQuery滚动事件的方向？

Question

如何确定jQuery滚动事件的方向？我在寻找这样的东西：$(window).scroll(function(event){    if (/* magic code*/ ){        // upscroll code    } else {       // downscroll code    }});有什么想法吗？

Answer 1

检查电流scrollTop与以前scrollTop

var lastScrollTop = 0;$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;});

Answer 2

您可以这样做，而不必跟踪上一个滚动顶部，正如所有其他示例所要求的那样：

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        console.log('Scroll up');
    }
    else {
        console.log('Scroll down');
    }});

我不是这方面的专家，所以可以继续研究，但是当你使用$(element).scroll，正在收听的事件是“滚动”事件。

但如果你特别听一听mousewheel事件，通过使用绑定，originalEvent回调的事件参数的属性包含不同的信息。部分信息是wheelDelta..如果是阳性的话，你就把鼠标动起来。如果是阴性，你就把鼠标向下移动。

我猜是mousewheel事件将在鼠标轮转动时触发，即使页面没有滚动；在这种情况下，“滚动”事件可能不会被触发。如果你愿意，你可以打电话event.preventDefault()在回调的底部，以防止页面滚动，以便您可以将鼠标轮事件用于页面滚动以外的其他内容，例如某种类型的缩放功能。

Answer 3

存储上一个滚动位置，然后查看新滚动位置是否大于或小于该位置。

以下是避免任何全局变量的方法(这里有小提琴):

(function () {
    var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
           alert('down');
       } else {
          alert('up');
       }
       previousScroll = currentScroll;
    });}()); //run this anonymous function immediately