Как определить направление прокрутки без фактической прокрутки

Я кодирую страницу, где первый раз, когда пользователь прокручивается, он фактически не прокручивает страницу вниз, вместо этого добавляет класс с переходом. Я хотел бы обнаружить, когда пользователь прокручивается, потому что, если он прокручивается, я хочу, чтобы он сделал что-то еще. Все методы, которые я нашел, основаны на определении текущего тела ScrollTop, а затем сравниваются с телом scrollTop после прокрутки страницы, определяя направление, но поскольку страница фактически не прокручивается, тело scrollTop() doesn ' t изменение.

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

    }


});

Это то, с чем я пришел, но в этом случае не имеет значения, в каком направлении я прокручиваю его, вызывает событие

Ответ 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>

Ответ 2

Попробуйте это с помощью addEventListener.

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

демонстрация

Обновить:

Как упоминалось в одном из ответов, событие mousewheel обесценивается. Вместо этого вы должны использовать событие колеса.

Ответ 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

Протестировано на хроме и

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

});

Ответ 5

эта работа в приложении реагировать

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

после добавления прослушивателя событий в функции u можно использовать deltaY для захвата колеса мыши

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

Ответ 6

Я знаю, что это сообщение было написано 5 лет назад, но я не нашел ни одного хорошего ответа Jquery (.on('mousewheel') не работает для меня...)

Просто ответьте с помощью jquery и используйте окно вместо тела, чтобы убедиться, что вы используете событие прокрутки:

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