如何确定滚动方向而不实际滚动

我正在编写一个页面，用户第一次滚动时，它实际上不会向下滚动页面，而是添加一个带有转换的类。 我想检测用户何时向下滚动，因为如果他向上滚动，我希望它做其他事情。 我发现的所有方法都是基于定义当前正文ScrollTop，然后在页面滚动后与body scrollTop进行比较，定义方向，但由于页面实际上没有滚动，因此bodyTop（）不会改变。

animationIsDone = false; function preventScroll(e) { e.preventDefault(); e.stopPropagation(); } $('body').on('mousewheel', function(e) { if (animationIsDone === false) { $("#main-header").removeClass("yellow-overlay").addClass("yellow-overlay-darker"); $(".site-info").first().addClass("is-description-visible"); preventScroll(e); setTimeout(function() { animationIsDone = true; }, 1000); } }); 

这就是我所拥有的，但是这样我滚动它的方向无关紧要触发事件

Answer 1

mousewheel事件很快就会过时。 你应该用wheel代替。

这也可以轻松实现垂直和/或水平滚动方向，无需滚动条。

此活动在所有当前主流浏览器中都得到了支持，并且应该是未来的标准。

这是一个演示：

 window.addEventListener('wheel', function(e) { if (e.deltaY < 0) { console.log('scrolling up'); document.getElementById('status').innerHTML = 'scrolling up'; } if (e.deltaY > 0) { console.log('scrolling down'); document.getElementById('status').innerHTML = 'scrolling down'; } }); 

Answer 2

使用addEventListener尝试此操作。

 window.addEventListener('mousewheel', function(e){ wDelta = e.wheelDelta < 0 ? 'down' : 'up'; console.log(wDelta); }); 

演示

更新：

如其中一个答案中所述， mousewheel事件已折旧。 您应该使用wheel事件。

Answer 3

尝试使用e.wheelDelta

 var animationIsDone = false, scrollDirection = 0; function preventScroll(e) { e.preventDefault(); e.stopPropagation(); } $('body').on('mousewheel', function(e) { if (e.wheelDelta >= 0) { console.log('Scroll up'); //your scroll data here } else { console.log('Scroll down'); //your scroll data here } if (animationIsDone === false) { $("#main-header").removeClass("yellow-overlay").addClass("yellow-overlay-darker"); $(".site-info").first().addClass("is-description-visible"); preventScroll(e); setTimeout(function() { animationIsDone = true; }, 1000); } }); 

注意：请记住，不推荐使用MouseWheel，FireFox不支持

Answer 4

测试铬和

 $('body').on('mousewheel', function(e) { if (e.originalEvent.deltaY >= 0) { console.log('Scroll up'); //your scroll data here } else { console.log('Scroll down'); //your scroll data here } });