jQuery - Détecter le défilement

Question

Je souhaite exécuter une fonction lorsque quelqu'un fait défiler un élément. Quelque chose comme ça:

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

Mais ces fonctions n'existent pas. Y at-il une solution à ce problème? Ils semblent pouvoir le faire. Malheureusement, le code source est compressé, donc pas de chance là-bas ...

Merci!!

Answer 1

J'ai réussi à comprendre à la fin, donc si quelqu'un cherche la réponse:

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

Answer 2

L'exemple suivant n'écoutera que le défilement MOUSE, pas de défilement tactile ni le pavé tactile.

Il utilise jQuery.on () (à partir de jQuery 1.7, la méthode .on () est la méthode recommandée pour attacher des gestionnaires d’événements à 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/

Answer 3

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

Démo: http://jsfiddle.net/AlienWebguy/Bka6F/

Answer 4

Voici un exemple 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;
  });
});

L' #container est votre div id. L' #target , c'est juste pour le voir fonctionner. Modifier ce que vous voulez quand ou vers le 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?!

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

Answer 5

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