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

Posted 2023-02-19

【中文标题】如何在不实际滚动的情况下确定滚动方向

【英文标题】：How to determine scroll direction without actually scrolling

【发布时间】：2014-08-04 16:59:12

【问题描述】：

我正在编写一个页面，当用户第一次滚动时，它实际上并没有向下滚动页面，而是添加了一个带有过渡的类。 我想检测用户何时向下滚动，因为如果他向上滚动，我希望它做其他事情。 我找到的所有方法都是基于定义当前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。在这里您可以查看一个具有跨浏览器支持的示例，处理滚动：***.com/questions/4989632...

【参考方案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>

【讨论】：

投票赞成使用实际 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
    

);