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代替。

这也很容易让你在没有滚动条的情况下进行垂直和/或水平滚动方向。

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

这是一个演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用addEventListener尝试此操作。

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

Demo

<强>更新

如其中一个答案中所述， 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

在chrome和

上进行了测试

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

});

Answer 5

此应用在React应用中

<p onWheel={this.onMouseWheel}></p>

添加事件侦听器后，在功能中您可以使用deltaY捕获鼠标滚轮

onMouseWheel = (e) => {
 e.deltaY > 0 
   ? console.log("Down")
   : console.log("up")
}

Answer 6

我知道这篇文章来自5年前，但是我没有看到任何好的Jquery答案（.on('mousewheel')对我不起作用...）

使用jquery的简单答案，并使用window而不是body来确保您正在滚动事件：

$(window).on('wheel', function(e) {
    var scroll = e.originalEvent.deltaY < 0 ? 'up' : 'down';
    console.log(scroll);
});

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

6 个答案: