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

问题描述

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

I am coding a page where the first time the user scrolls, it doesn't actually scroll the page down, instead it adds a class with a transition.I'd like to detect when the user is scrolling down, because if he scrolls up, I want it to do something else.All the methods that I've found are based on defining the current body ScrollTop, and then comparing with the body scrollTop after the page scrolls, defining the direction, but since the page doesn't actually scroll, the body scrollTop() doesn't change.

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

    }


});

这就是我的结果，但这样我滚动它的方向并不重要触发事件

This is what I have come with, but that way it doesn't matter the direction I scroll it triggers the event

推荐答案

mousewheel 事件很快就会过时。您应该使用 wheel 。

The mousewheel event is quickly becoming obsolete. You should use wheel instead.

这也可以轻松地让您进行垂直和/或水平滚动方向而无需滚动条。

This would also easily allow you to the vertical and/or horizontal scroll direction without scroll bars.

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

This event has support in all current major browsers and should remain the standard far into the future.

这是一个演示：

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

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

这篇关于如何确定滚动方向而不实际滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！