Я ищу что-то на этот счет:

$(window).scroll(function(event){
   if (/* magic code*/ ){
       // upscroll code
   } else {
      // downscroll code
   }
});

Любые идеи?

Проверьте текущий scrollTopпротив предыдущегоscrollTop

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

Вы можете сделать это, не отслеживая предыдущую вершину прокрутки, поскольку все остальные примеры требуют:

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        console.log('Scroll up');
    }
    else {
        console.log('Scroll down');
    }
});

Я не эксперт по этому вопросу, поэтому не стесняйтесь исследовать его дальше, но кажется, что когда вы используете $(element).scroll, прослушиваемое событие является событием прокрутки.

Но если вы специально прослушиваете mousewheelсобытие с помощью bind, originalEventатрибут параметра события вашего обратного вызова содержит другую информацию. Часть этой информации wheelDelta. Если оно положительное, вы переместили колесико мыши вверх. Если оно отрицательное, вы переместили колесо мыши вниз.

Я предполагаю, что mousewheelсобытия будут срабатывать, когда колесо мыши поворачивается, даже если страница не прокручивается; случай, когда события «прокрутки», вероятно, не запускаются. Если вы хотите, вы можете позвонить event.preventDefault()в нижней части вашего обратного вызова, чтобы предотвратить прокрутку страницы, и чтобы вы могли использовать событие mousewheel для чего-то другого, кроме прокрутки страницы, например, для некоторого типа функции масштабирования.

Сохраните предыдущее местоположение прокрутки, а затем посмотрите, больше или меньше новое.

Вот способ избежать любых глобальных переменных ( здесь доступна скрипка ):

(function () {
    var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
           alert('down');
       } else {
          alert('up');
       }
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately

Существующее решение

Там может быть 3 решения из этой публикации и другой ответ .

Решение 1

    var lastScrollTop = 0;
    $(window).on('scroll', function() {
        st = $(this).scrollTop();
        if(st < lastScrollTop) {
            console.log('up 1');
        }
        else {
            console.log('down 1');
        }
        lastScrollTop = st;
    });

Решение 2

    $('body').on('DOMMouseScroll', function(e){
        if(e.originalEvent.detail < 0) {
            console.log('up 2');
        }
        else {
            console.log('down 2');
        }
    });

Решение 3

    $('body').on('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            console.log('up 3');
        }
        else {
            console.log('down 3');
        }
    });

Multi Browser Test

Я не мог проверить это на Safari

хром 42 (Win 7)

• Решение 1
  • Up: 1 событие за 1 свиток
  • Вниз: 1 событие на 1 свиток
• Soltion 2
  • Up: не работает
  • Вниз: не работает
• Решение 3
  • Up: 1 событие за 1 свиток
  • Вниз: 1 событие на 1 свиток

Firefox 37 (победа 7)

• Решение 1
  • Up: 20 событий за 1 свиток
  • Вниз: 20 событий за 1 свиток
• Soltion 2
  • Up: не работает
  • Вниз: 1 событие на 1 свиток
• Решение 3
  • Up: не работает
  • Вниз: не работает

IE 11 (Win 8)

• Решение 1
  • Up: 10 событий на 1 прокрутку (побочный эффект: прокрутка вниз произошла наконец)
  • Вниз: 10 событий за 1 свиток
• Soltion 2
  • Up: не работает
  • Вниз: не работает
• Решение 3
  • Up: не работает
  • Вниз: 1 событие на 1 свиток

IE 10 (Win 7)

• Решение 1
  • Up: 1 событие за 1 свиток
  • Вниз: 1 событие на 1 свиток
• Soltion 2
  • Up: не работает
  • Вниз: не работает
• Решение 3
  • Up: 1 событие за 1 свиток
  • Вниз: 1 событие на 1 свиток

IE 9 (Win 7)

• Решение 1
  • Up: 1 событие за 1 свиток
  • Вниз: 1 событие на 1 свиток
• Soltion 2
  • Up: не работает
  • Вниз: не работает
• Решение 3
  • Up: 1 событие за 1 свиток
  • Вниз: 1 событие на 1 свиток

IE 8 (Win 7)

• Решение 1
  • Up: 2 ​​события за 1 прокрутку (побочный эффект: прокрутка вниз произошла наконец)
  • Вниз: 2 ~ 4 события за 1 прокрутку
• Soltion 2
  • Up: не работает
  • Вниз: не работает
• Решение 3
  • Up: 1 событие за 1 свиток
  • Вниз: 1 событие на 1 свиток

Комбинированное решение

Я проверил, что побочный эффект от IE 11 и IE 8 исходит из if elseзаявления. Итак, я заменил его if else ifследующим заявлением.

Из мультибраузерного теста я решил использовать Решение 3 для обычных браузеров и Решение 1 для Firefox и IE 11.

Я передал этот ответ, чтобы обнаружить IE 11.

    // Detect IE version
    var iev=0;
    var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
    var trident = !!navigator.userAgent.match(/Trident\/7.0/);
    var rv=navigator.userAgent.indexOf("rv:11.0");

    if (ieold) iev=new Number(RegExp.$1);
    if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
    if (trident&&rv!=-1) iev=11;

    // Firefox or IE 11
    if(typeof InstallTrigger !== 'undefined' || iev == 11) {
        var lastScrollTop = 0;
        $(window).on('scroll', function() {
            st = $(this).scrollTop();
            if(st < lastScrollTop) {
                console.log('Up');
            }
            else if(st > lastScrollTop) {
                console.log('Down');
            }
            lastScrollTop = st;
        });
    }
    // Other browsers
    else {
        $('body').on('mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0) {
                console.log('Up');
            }
            else if(e.originalEvent.wheelDelta < 0) {
                console.log('Down');
            }
        });
    }

Я понимаю, что уже был принят ответ, но хотел опубликовать то, что я использую, на случай, если это может кому-нибудь помочь. Я получаю направление как cliphexс событием mousewheel, но с поддержкой Firefox. Это полезно делать таким образом, если вы делаете что-то вроде блокировки прокрутки и не можете получить текущую вершину прокрутки.

Смотрите живую версию здесь .

$(window).on('mousewheel DOMMouseScroll', function (e) {

    var direction = (function () {

        var delta = (e.type === 'DOMMouseScroll' ?
                     e.originalEvent.detail * -40 :
                     e.originalEvent.wheelDelta);

        return delta > 0 ? 0 : 1;
    }());

    if(direction === 1) {
       // scroll down
    }
    if(direction === 0) {
       // scroll up
    }
});

Событие прокрутки

В событии прокрутки ведет себя странно в FF (он вызывается много раз из - за гладкости прокрутки) , но она работает.

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

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "35px"
});

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        self = $(target),
        scrollTop = window.pageYOffset || target.scrollTop,
        lastScrollTop = self.data("lastScrollTop") || 0,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    $("#test").html(scrollText +
      "<br>innerHeight: " + self.innerHeight() +
      "<br>scrollHeight: " + scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === self.innerHeight()) {
      console.log("► End of scroll");
    }

    //saves the current scrollTop
    self.data("lastScrollTop", scrollTop);
});

Wheel Event

Вы также можете взглянуть на MDN, он предоставляет отличную информацию о Wheel Event .

Примечание. Событие wheel вызывается только при использовании колесика мыши. ; клавиши курсора и перетаскивание полосы прокрутки не запускают событие.

Я прочитал документ и пример: прослушивая это событие через браузер,
и после некоторых тестов с FF, IE, chrome, safari я получил следующий фрагмент:

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "15px"
});

//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
    var evt = e.originalEvent || e;

    //this is what really matters
    var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
        scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
        scrollText = "";

    if (deltaY > 0) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    //console.log("Event: ", evt);
    $("#test").html(scrollText +
      "<br>clientHeight: " + this.clientHeight +
      "<br>scrollHeight: " + this.scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>deltaY: " + deltaY);
});

В случае, если вы просто хотите узнать, прокручиваете ли вы вверх или вниз с помощью указателя (мыши или трекпада ), вы можете использовать свойство deltaYwheel события.

$('.container').on('wheel', function(event) {
  if (event.originalEvent.deltaY > 0) {
    $('.result').append('Scrolled down!<br>');
  } else {
    $('.result').append('Scrolled up!<br>');
  }
});

.container {
  height: 200px;
  width: 400px;
  margin: 20px;
  border: 1px solid black;
  overflow-y: auto;
}
.content {
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="content">
    Scroll me!
  </div>
</div>

<div class="result">
  <p>Action:</p>
</div>

var tempScrollTop, currentScrollTop = 0; 

$(window).scroll(function(){ 

   currentScrollTop = $("#div").scrollTop(); 

   if (tempScrollTop > currentScrollTop ) {
       // upscroll code
   }
  else if (tempScrollTop < currentScrollTop ){
      // downscroll code
  }

  tempScrollTop = currentScrollTop; 
} 

или используйте расширение колесика мыши , см. здесь .

Я видел много вариантов хороших ответов здесь, но, похоже, у некоторых людей возникают проблемы с кроссбраузерностью, так что это мое решение.

Я успешно использовал это для определения направления в FF, IE и Chrome ... Я не проверял его в сафари, так как обычно использую окна.

$("html, body").bind({'mousewheel DOMMouseScroll onmousewheel touchmove scroll': 
    function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();

        //Determine Direction
        if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta >= 0) {
            //Up
            alert("up");

        } else if (e.originalEvent.detail && e.originalEvent.detail <= 0) {
            //Up
            alert("up");

        } else {
            //Down
            alert("down");
        }
    }
});

Имейте в виду, я также использую это, чтобы остановить прокрутку, поэтому, если вы хотите, чтобы прокрутка все еще происходила, вы должны удалить e.preventDefault(); e.stopPropagation();

Чтобы игнорировать любой момент / импульс / отскок вверху и внизу страницы, вот модифицированная версия принятого ответа Иосии :

var prevScrollTop = 0;
$(window).scroll(function(event){

    var scrollTop = $(this).scrollTop();

    if ( scrollTop < 0 ) {
        scrollTop = 0;
    }
    if ( scrollTop > $('body').height() - $(window).height() ) {
        scrollTop = $('body').height() - $(window).height();
    }

    if (scrollTop >= prevScrollTop && scrollTop) {
        // scrolling down
    } else {
        // scrolling up
    }

    prevScrollTop = scrollTop;
});

Вы можете определить направление мышиных раковин.

$(window).on('mousewheel DOMMouseScroll', function (e) {
    var delta = e.originalEvent.wheelDelta ? 
                   e.originalEvent.wheelDelta : -e.originalEvent.detail;

    if (delta >= 0) {
        console.log('scroll up');
    } else {
        console.log('scroll down');
    }
});

Используйте это, чтобы найти направление прокрутки. Это только для определения направления вертикальной прокрутки. Поддерживает все кросс-браузеры.

    var scrollableElement = document.getElementById('scrollableElement');

    scrollableElement.addEventListener('wheel', findScrollDirectionOtherBrowsers);

    function findScrollDirectionOtherBrowsers(event){
        var delta;

        if (event.wheelDelta){
            delta = event.wheelDelta;
        }else{
            delta = -1 * event.deltaY;
        }

        if (delta < 0){
            console.log("DOWN");
        }else if (delta > 0){
            console.log("UP");
        }

    }

пример

этот код прекрасно работает с IE, Firefox, Opera и Chrome:

$(window).bind('wheel mousewheel', function(event) {
      if (event.originalEvent.deltaY >= 0) {
          console.log('Scroll down');
      }
      else {
          console.log('Scroll up');
      }
  });

'wheel mousewheel' и свойство deltaY должны использоваться в функции bind () .

Помните: ваш пользователь должен обновить свою систему и браузеры из соображений безопасности. В 2018 году оправдание «у меня IE 7» - это чепуха. Мы должны обучать пользователей.

Хорошего дня :)

Держите это супер просто:

Способ прослушивания событий jQuery:

$(window).on('wheel', function(){
  whichDirection(event);
});

Vanilla JavaScript Event Listener Путь:

if(window.addEventListener){
  addEventListener('wheel', whichDirection, false);
} else if (window.attachEvent) {
  attachEvent('wheel', whichDirection, false);
}

Функция остается прежней:

function whichDirection(event){
  console.log(event + ' WheelEvent has all kinds of good stuff to work with');
  var scrollDirection = event.deltaY;
  if(scrollDirection === 1){
    console.log('meet me at the club, going down', scrollDirection);
  } else if(scrollDirection === -1) {
    console.log('Going up, on a tuesday', scrollDirection);
  }
}

Я написал более углубленный пост на этом здесь

Вы можете использовать опции прокрутки и колесика мыши для одновременного отслеживания движения вверх и вниз.

 $('body').bind('scroll mousewheel', function(event) {

if (event.originalEvent.wheelDelta >= 0) {
      console.log('moving down');   
    }
    else {
      console.log('moving up'); 
    }
});

Вы также можете заменить «тело» на (окно).

Запишите приращение .data ()прокручиваемого элемента, и вы сможете проверить, сколько раз прокрутка достигла вершины.

Почему никто не использует eventобъект, возвращаемый при jQueryпрокрутке?

$window.on('scroll', function (event) {
    console.group('Scroll');
    console.info('Scroll event:', event);
    console.info('Position:', this.pageYOffset);
    console.info('Direction:', event.originalEvent.dir); // Here is the direction
    console.groupEnd();
});

Я использую chromiumи не проверял в других браузерах, есть ли у них dirсвойство.

Поскольку bindверсия v3 устарела («заменена on») и wheelтеперь поддерживается , забудьте wheelDelta:

$(window).on('wheel', function(e) {
  if (e.originalEvent.deltaY > 0) {
    console.log('down');
  } else {
    console.log('up');
  }
  if (e.originalEvent.deltaX > 0) {
    console.log('right');
  } else {
    console.log('left');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="white-space:nowrap;overflow:scroll">
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
🚂🚃🚃🚂🚃🚃🚃🚂🚃🚃🚂🚃🚃🚃🚂🚃<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
</h1>

wheelмероприятия Совместимость браузера на MDN - х (2019-03-18) :

Вы также можете использовать это

$(document).ready(function(){

  var currentscroll_position = $(window).scrollTop();
$(window).on('scroll', function(){
Get_page_scroll_direction();
});

function Get_page_scroll_direction(){
  var running_scroll_position = $(window).scrollTop();
  if(running_scroll_position > currentscroll_position) {
      
      $('.direction_value').text('Scrolling Down Scripts');

  } else {
       
       $('.direction_value').text('Scrolling Up Scripts');

  }
  currentscroll_position = running_scroll_position;
}

});

.direction_value{
  position: fixed;
  height: 30px;
  background-color: #333;
  color: #fff;
  text-align: center;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="direction_value">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>

в .data()элементе вы можете сохранить JSON и проверить значения для запуска событий

{ top : 1,
   first_top_event: function(){ ...},
   second_top_event: function(){ ...},
   third_top_event: function(){ ...},
   scroll_down_event1: function(){ ...},
   scroll_down_event2: function(){ ...}
}

Это простое и легкое обнаружение того, когда пользователь прокручивает страницу сверху и когда он возвращается наверх.

$(window).scroll(function() {
    if($(window).scrollTop() > 0) {
        // User has scrolled
    } else {
        // User at top of page
    }
});

Это оптимальное решение для определения направления именно тогда, когда пользователь заканчивает прокрутку.

var currentScrollTop = 0 ;

$(window).bind('scroll', function () {     

    scrollTop = $(this).scrollTop();

    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {

        if(scrollTop > currentScrollTop){
            // downscroll code
            $('.mfb-component--bl').addClass('mfbHide');
        }else{
            // upscroll code
            $('.mfb-component--bl').removeClass('mfbHide');
        }
        currentScrollTop = scrollTop;

    }, 250));

});

Вы должны попробовать это

var scrl
$(window).scroll(function(){
        if($(window).scrollTop() < scrl){
            //some code while previous scroll
        }else{
            if($(window).scrollTop() > 200){
                //scroll while downward
            }else{//scroll while downward after some specific height
            }
        }
        scrl = $(window).scrollTop();
    });

У меня были проблемы с упругой прокруткой (отскок прокрутки, резиновое соединение). Игнорирование события прокрутки вниз, если оно близко к верхней части страницы, сработало для меня.

var position = $(window).scrollTop();
$(window).scroll(function () {
    var scroll = $(window).scrollTop();
    var downScroll = scroll > position;
    var closeToTop = -120 < scroll && scroll < 120;
    if (downScroll && !closeToTop) {
        // scrolled down and not to close to top (to avoid Ipad elastic scroll-problems)
        $('.top-container').slideUp('fast');
        $('.main-header').addClass('padding-top');
    } else {
        // scrolled up
        $('.top-container').slideDown('fast');
        $('.main-header').removeClass('padding-top');
    }
    position = scroll;
});

Это работает во всех браузерах ПК или телефонов, расширяя список ответов. Можно построить более сложное окно объекта события ["scroll_evt"], а затем вызвать его в функции handleScroll (). Это срабатывает для 2 одновременных условий, если определенная задержка истекла или определенная дельта пропущена, чтобы устранить некоторые нежелательные триггеры.

window["scroll_evt"]={"delta":0,"delay":0,"direction":0,"time":Date.now(),"pos":$(window).scrollTop(),"min_delta":120,"min_delay":10};
$(window).scroll(function() {

    var currentScroll = $(this).scrollTop();
    var currentTime = Date.now();
    var boolRun=(window["scroll_evt"]["min_delay"]>0)?(Math.abs(currentTime - window["scroll_evt"]["time"])>window["scroll_evt"]["min_delay"]):false;
    boolRun = boolRun && ((window["scroll_evt"]["min_delta"]>0)?(Math.abs(currentScroll - window["scroll_evt"]["pos"])>window["scroll_evt"]["min_delta"]):false);
    if(boolRun){
        window["scroll_evt"]["delta"] = currentScroll - window["scroll_evt"]["pos"];
        window["scroll_evt"]["direction"] = window["scroll_evt"]["delta"]>0?'down':'up';
        window["scroll_evt"]["delay"] =currentTime - window["scroll_evt"]["time"];//in milisecs!!!
        window["scroll_evt"]["pos"] = currentScroll;
        window["scroll_evt"]["time"] = currentTime;
        handleScroll();
    }
});


function handleScroll(){
    event.stopPropagation();
    //alert(window["scroll_evt"]["direction"]);
    console.log(window["scroll_evt"]);
}