Comment détecter le sens de défilement de

Exemple suivant sera à l'écoute de défilement de la SOURIS, pas de tactile, ni de pavé tactile défilement.

Il utilise jQuery.sur() (Comme de jQuery 1.7, l' .sur() la méthode est la méthode préférée pour la fixation des gestionnaires d'événements dans un document).

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

Fonctionne sur tous les navigateurs.

violon: http://jsfiddle.net/honk1/gWnNv/7/

Solution Existante

Il pourrait être la 3 solution de cette annonce et d'autres stackoverflow article.

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

la Solution 2

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

la Solution 3

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

---

Multi Test Du Navigateur

je ne pouvais pas testé sur Safari

chrome 42 (Win 7)

• Solution 1
  • : 1 cas pour 1 faites défiler jusqu'
  • Bas : 1 cas pour 1 faites défiler jusqu'
• Soltion 2
  • Jusqu' : Pas de travail
  • Bas : Pas de travail
• Solution 3
  • : 1 cas pour 1 faites défiler jusqu'
  • Bas : 1 cas pour 1 faites défiler jusqu'

Firefox 37 (Win 7)

• Solution 1
  • : 20 événements par 1 faites défiler jusqu'
  • Bas : 20 événements par 1 faites défiler jusqu'
• Soltion 2
  • Jusqu' : Pas de travail
  • Bas : 1 cas pour 1 faites défiler jusqu'
• Solution 3
  • Jusqu' : Pas de travail
  • Bas : Pas de travail

IE 11 (Win 8)

• Solution 1
  • Jusqu' : 10 événements par 1 rouleau (effet secondaire : défilement s'est produit à la dernière)
  • Bas : 10 événements par 1 faites défiler jusqu'
• Soltion 2
  • Jusqu' : Pas de travail
  • Bas : Pas de travail
• Solution 3
  • Jusqu' : Pas de travail
  • Bas : 1 cas pour 1 faites défiler jusqu'

IE 10 (Win 7)

• Solution 1
  • : 1 cas pour 1 faites défiler jusqu'
  • Bas : 1 cas pour 1 faites défiler jusqu'
• Soltion 2
  • Jusqu' : Pas de travail
  • Bas : Pas de travail
• Solution 3
  • : 1 cas pour 1 faites défiler jusqu'
  • Bas : 1 cas pour 1 faites défiler jusqu'

IE 9 (Win 7)

• Solution 1
  • : 1 cas pour 1 faites défiler jusqu'
  • Bas : 1 cas pour 1 faites défiler jusqu'
• Soltion 2
  • Jusqu' : Pas de travail
  • Bas : Pas de travail
• Solution 3
  • : 1 cas pour 1 faites défiler jusqu'
  • Bas : 1 cas pour 1 faites défiler jusqu'

IE 8 (Win 7)

• Solution 1
  • : 2 événements par 1 rouleau (effet secondaire : défilement s'est produit à la dernière)
  • Bas : 2~4 événements par 1 faites défiler jusqu'
• Soltion 2
  • Jusqu' : Pas de travail
  • Bas : Pas de travail
• Solution 3
  • : 1 cas pour 1 faites défiler jusqu'
  • Bas : 1 cas pour 1 faites défiler jusqu'

---

Solution Combinée

J'ai vérifié que l'effet secondaire d'IE 11 et IE 8 est venu de if else déclaration. Donc, je l'ai remplacé par if else if énoncé de la manière suivante.

De la multi navigateur de test, j'ai décidé d'utiliser la Solution 3 pour les navigateurs les plus courants et la Solution 1 pour firefox et IE 11.

J'ai évoqué cette réponse pour détecter 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');
            }
        });
    }

Voici un échantillon montrant un moyen facile de le faire. Le script est:

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

La #container est votre div id. Le #target est juste pour voir ce qu'il fonctionne. Modifier ce que vous voulez quand ou quand la bas.

MODIFIER

L'OP n'a pas dit avant, mais depuis qu'il est à l'aide d'un div avec overflow: hidden, le défilement ne se produit pas, le script pour détecter le défilement est la moindre des choses. Eh bien, comment détecter quelque chose qui ne se produit pas?!

Donc, l'OP lui-même posté le lien avec ce qu'il veut, alors pourquoi ne pas utiliser cette bibliothèque? http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js.

L'appel est juste:

$(function() {
    $(".scrollable").scrollable({ vertical: true, mousewheel: true });
});

Vous pouvez utiliser ce plugin simple pour ajouter scrollUp et scrollDown à votre 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);