Как определить направление прокрутки

Я хочу запустить функцию, когда кто-то прокручивает элемент. Что-то вроде этого:

$('div').scrollDown(function(){ alert('down') }); $('div').scrollUp(function(){ alert('up') }); 

Но этих функций не существует. Есть ли решение этой проблемы? Они, похоже, в состоянии это сделать. К сожалению, исходный код сжат, поэтому не повезло …

Благодаря!!

Мне удалось разобраться в этом, поэтому, если кто-то ищет ответ:

  //Firefox $('#elem').bind('DOMMouseScroll', function(e){ if(e.originalEvent.detail > 0) { //scroll down console.log('Down'); }else { //scroll up console.log('Up'); } //prevent page fom scrolling return false; }); //IE, Opera, Safari $('#elem').bind('mousewheel', function(e){ if(e.originalEvent.wheelDelta < 0) { //scroll down console.log('Down'); }else { //scroll up console.log('Up'); } //prevent page fom scrolling return false; }); 

Следующий пример будет прослушивать только прокрутку MOUSE, никаких прокруток и трекпада.

Он использует jQuery.on () (как и в jQuery 1.7, метод .on () является предпочтительным методом привязки обработчиков событий к документу).

 $('#elem').on( 'DOMMouseScroll mousewheel', function ( event ) { if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY //scroll down console.log('Down'); } else { //scroll up console.log('Up'); } //prevent page fom scrolling return false; }); 

Работает во всех браузерах.

скрипка: http://jsfiddle.net/honk1/gWnNv/7/

Этот заслуживает обновления – в настоящее время у нас есть wheel :

 $(function() { $(window).on('wheel', function(e) { var delta = e.originalEvent.deltaY; if (delta > 0) $('body').text('down'); else $('body').text('up'); return false; // this line is only added so the whole page won't scroll in the demo }); }); 
 body { font-size: 22px; text-align: center; color: white; background: grey; } 
  

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

Из этой публикации и другой статьи stackoverflow может быть 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'); } }); 

Тест нескольких браузеров

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

chrome 42 (Win 7)

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

Firefox 37 (Win 7)

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

IE 11 (Win 8)

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

IE 10 (Win 7)

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

IE 9 (Win 7)

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

IE 8 (Win 7)

  • Решение 1
    • Up: 2 ​​события на 1 прокрутку (побочный эффект: последний прокрутки)
    • Вниз: 2 ~ 4 события за 1 прокрутку
  • Soltion 2
    • Вверх: Не работает
    • Вниз: не работает
  • Решение 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'); } }); } 
 $(function(){ var _top = $(window).scrollTop(); var _direction; $(window).scroll(function(){ var _cur_top = $(window).scrollTop(); if(_top < _cur_top) { _direction = 'down'; } else { _direction = 'up'; } _top = _cur_top; console.log(_direction); }); }); 

Демо: http://jsfiddle.net/AlienWebguy/Bka6F/

Вот пример, показывающий простой способ сделать это. Скрипт:

 $(function() { var _t = $("#container").scrollTop(); $("#container").scroll(function() { var _n = $("#container").scrollTop(); if (_n > _t) { $("#target").text("Down"); } else { $("#target").text("Up"); } _t = _n; }); }); 

#container – ваш id div. #target – просто посмотреть, как он работает. Переходите к тому, что хотите, когда вверх или вниз.

РЕДАКТИРОВАТЬ

ОП не говорил раньше, но поскольку он использует div с overflow: hidden , прокрутки не происходит, тогда скрипт для обнаружения прокрутки является наименьшим из них. Ну, как обнаружить что-то, чего не бывает ?!

Итак, сам ОП разместил ссылку с тем, что он хочет, так почему бы не использовать эту библиотеку? http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js .

Вызов:

 $(function() { $(".scrollable").scrollable({ vertical: true, mousewheel: true }); }); 
 var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x $(document).bind(mousewheelevt, function(e) { var evt = window.event || e //equalize event object evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF if(delta > 0) { scrollup(); } else { scrolldown(); } } ); 

Вы можете использовать этот простой плагин для добавления scrollUp и scrollDown в jQuery

https://github.com/phpust/JQueryScrollDetector

 var lastScrollTop = 0; var action = "stopped"; var timeout = 100; // Scroll end detector: $.fn.scrollEnd = function(callback, timeout) { $(this).scroll(function(){ // get current scroll top var st = $(this).scrollTop(); var $this = $(this); // fix for page loads if (lastScrollTop !=0 ) { // if it's scroll up if (st < lastScrollTop){ action = "scrollUp"; } // else if it's scroll down else if (st > lastScrollTop){ action = "scrollDown"; } } // set the current scroll as last scroll top lastScrollTop = st; // check if scrollTimeout is set then clear it if ($this.data('scrollTimeout')) { clearTimeout($this.data('scrollTimeout')); } // wait until timeout done to overwrite scrolls output $this.data('scrollTimeout', setTimeout(callback,timeout)); }); }; $(window).scrollEnd(function(){ if(action!="stopped"){ //call the event listener attached to obj. $(document).trigger(action); } }, timeout); 
  • Элемент прокрутки в виде с seleniumом
  • Отслеживание положения прокрутки и уведомление об этом других компонентах
  • Перемещение / перемещение вкладки в сочетании с ScrollView?
  • jQuery изменение цвета цветной пользовательский прокрутка
  • Внедрение средства просмотра журналов с помощью WPF
  • Как получить высоту полного содержимого div с помощью jQuery?
  • jQuery триггер, когда 2 / 3s div находятся в окне просмотра
  • Использование прокручиваемых результатов Hibernate для медленного чтения 90 миллионов записей
  • Сохранять / сохранять / восстанавливать позицию прокрутки при возврате в ListView
  • Android с автоматической горизонтальной прокруткой TextView
  • Горизонтальная прокрутка сетки
  • Interesting Posts
    Давайте будем гением компьютера.