javascript - 检测向上滚动效果不佳

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

您绑定(bind)的事件太多。

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

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

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

});

这是一个有效的 JS fiddle :

https://jsfiddle.net/r1sjv2tv/

编辑:上述答案有效，尽管仅在使用滚轮滚动时有效。 但是，也可以使用鼠标滚动窗口。如果你也处理它，它会变得有点复杂。

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

$('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());
});

这与原始事件触发器无关。

请看 fiddle :

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