检测向上滚动无法正常工作

Question

我试图在向上滚动的检测并不顺利

$(window).bind('DOMMouseScroll scroll mousewheel', function(event) { 

    if (event.originalEvent.wheelDelta >= 0) { 
      console.log('scroll up'); 
     }else { 
      console.log('scroll down'); 
    }); 

}); 

这里使用此代码来获得滚动方向问题的结果enter image description here它的屏幕截图显示向上滚动然后向下滚动但我没有向下滚动

Answer 1

你有太多的事件绑定。

试试这段代码，唯一的区别是我在div上使用它。

$('div').bind('mousewheel', function(event) { 

    if (event.originalEvent.wheelDelta >= 0) { 
      console.log('scroll up'); 
     }else { 
      console.log('scroll down'); 
    } 

}); 

这里是一个工作JS提琴：

https://jsfiddle.net/r1sjv2tv/

编辑：以上回答的作品，尽管使用滚轮滚动时才可用。 但是，窗口也可以用鼠标滚动。如果你也处理它，它会变得更复杂一些。

我做了一个解决方案，它监听onscroll事件，并简单地将当前的scrolltop位置与最后一个scrolltop位置进行比较，以确定滚动的方向。

$('div').bind('scroll', function(event) { 

    if ($(this).scrollTop() < $(this).data('last-scroll')) { 
    console.log('scroll up'); 
    } else { 
    console.log('scroll down'); 
    } 

    $(this).data('last-scroll',$(this).scrollTop()); 
}); 

这可以独立于原始事件触发器工作。

请参阅小提琴：

https://jsfiddle.net/r1sjv2tv/2/