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

IT技术 javascript jquery scroll
2021-03-07 21:35:22

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

    }


});

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

6个回答

该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 问题而获得投票支持。
2021-04-23 21:35:22
如何dispatchEvent向上或向下滚动？
2021-04-23 21:35:22
这是否也可以在触摸设备上运行（检测滑动滚动尝试）？
2021-05-15 21:35:22

试试这个使用addEventListener.

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

演示

更新：

正如其中一个答案中提到的，鼠标滚轮事件已折旧。您应该改用wheel事件。

正如 www139 的回答中提到的，该mousewheel事件是depreciated。您应该改用该wheel事件（再次参见 www139 的回答）。
2021-04-22 21:35:22
非常感谢，工作就像一个魅力。这是一个没有缩短的版本，以防万一其他人需要它（这样初学者很难阅读）
2021-05-20 21:35:22

尝试使用 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);

    }


});

注意：请记住，FireFox 已弃用且不支持 MouseWheel

非常感谢..我会注意鼠标滚轮问题=)
2021-05-02 21:35:22

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

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

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

这一项在react应用程序中工作 

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

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

onMouseWheel = (e) => {
 e.deltaY > 0 
   ? console.log("Down")
   : console.log("up")
}
其它你可能感兴趣的问题
上一篇cancelBubble 和 stopPropagation 有什么区别？ 下一篇在 JavaScript/Jquery 中以 DD-Mon-YYY 格式获取当前日期