Как определить направление события прокрутки jQuery?

Question

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

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

Есть идеи?

Answer 1

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

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

Answer 2

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

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

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

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

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

Answer 3

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

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

    }

Пример

Answer 4

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

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

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

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

Answer 5

Сделайте это очень просто:

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

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

Путь прослушивателя событий Vanilla JavaScript:

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

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

Answer 6

Почему никто не использует объект 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 собственность.

Answer 7

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

Answer 8

Поскольку 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) :

Answer 9

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

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

Answer 10

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

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