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

Question

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

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(event)
{
 if (event.deltaY < 0)
 {
  console.log('scrolling up');
  document.getElementById('status').textContent= 'scrolling up';
 }
 else if (event.deltaY > 0)
 {
  console.log('scrolling down');
  document.getElementById('status').textContent= 'scrolling down';
 }
});

<div id="status"></div>

Answer 2

试试这个addEventListener.

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

演示

更新:

如其中一个答案中所述,鼠标滚轮事件已折旧.您应该使用wheel事件.