如何在不实际滚动的情况下确定滚动方向答案

【问题标题】：How to determine scroll direction without actually scrolling如何在不实际滚动的情况下确定滚动方向
【发布时间】：2023-03-15 04:33:01
【问题描述】：

我正在编写一个页面，当用户第一次滚动时，它实际上并没有向下滚动页面，而是添加了一个带有过渡的类。我想检测用户何时向下滚动，因为如果他向上滚动，我希望它做其他事情。我找到的所有方法都是基于定义当前body 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);

    }


});

这是我带来的，但是这样我滚动的方向并不重要，它会触发事件

【问题讨论】：

请注意，mousewheel 已弃用且非标准。虽然只有 FireFox 不支持。要支持 FireFox，可以尝试处理DOMMouseScroll，相当于mousewheel 事件处理程序中的e.wheelDelta 大约是-40*e.detail 事件处理程序中的-40*e.detail。看起来jQuery删除了该属性，您必须访问originalEvent。
您可以使用 wheel event。在这里您可以查看一个具有跨浏览器支持的示例，处理滚动：stackoverflow.com/questions/4989632...

标签： javascript jquery scroll

【解决方案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';
 }
});

&lt;div id="status"&gt;&lt;/div&gt;

【讨论】：

投票赞成使用实际 JavaScript（而不是框架/库）回答 JavaScript 问题。
我如何dispatchEvent 向上或向下滚动？
这是否也可以在触摸设备上运行（检测滑动滚动尝试）？

【解决方案2】：

使用addEventListener 试试这个。

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

Demo

更新：

正如其中一个答案所述，mousewheel 事件已被贬值。您应该改用 wheel 事件。

【讨论】：

非常感谢，工作就像一个魅力。这是一个未缩短的版本，以防其他人需要它（这样对于初学者来说我很难阅读）
正如 www139 的回答中提到的，mousewheel 事件是depreciated。您应该使用 wheel event 代替（再次，请参阅 www139 的答案）。

【解决方案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 中已被弃用且不受支持

【讨论】：

非常感谢..我会注意鼠标滚轮的问题=)

【解决方案4】：

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

使用 jquery 的简单答案，并使用窗口而不是正文来确保您正在接受滚动事件：

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

【讨论】：

【解决方案5】：

这个在反应应用中工作

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

添加事件监听后，在函数中可以使用 deltaY 来捕捉鼠标滚轮

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

【讨论】：

【解决方案6】：

在 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
    }

});

【讨论】：