Comment puis-je savoir dans quelle direction défile un volet de défilement en javascript?

Question

J'ai la jquery suivante pour gérer les événements de défilement sur un div particulier et écrire un contenu:

$('#myDiv').scroll(function(eventData) { 
    if(eventData.isGoingUp) 
    $('#myDiv').prepend('<p>Going up.</p>'); 
    else 
    $('#myDiv').append('<p>Going down.</p>'); 
}); 

Il est évident que, evt.isGoingUp n'existe pas réellement. Y a-t-il quelque chose qui existe qui puisse accomplir cette logique?

Answer 1

Espérons que cette solution est utile pour vous ... il fonctionne sur tous les éléments avec un nom de classe « scroll- Piste'. Vous devez également fournir un nouvel attribut à l'élément scrollable: données défilement = '{ "x": "0", "y": "0"}' Vous pouvez tester ici: http://jsfiddle.net/CgZDD/

-js-

$(document).ready(function(){ 
    // make sure overflow is set to 'scroll' 
    $('.scroll-track').css({ 
     overflow: 'scroll' 
    }); 

    $('.scroll-track').scroll(function() { 
     var scrollData = $(this).data('scroll'); 

     if(scrollData.y > $(this).scrollTop()){ 
      $('#scrollDir').append($(this).attr('id') + ' up'); 
     }else if(scrollData.y != $(this).scrollTop()){ 
      $('#scrollDir').append($(this).attr('id') + ' down'); 
     } 

     if(scrollData.x > $(this).scrollLeft()){ 
      $('#scrollDir').append($(this).attr('id') + ' left'); 
     }else if(scrollData.x != $(this).scrollLeft()){ 
      $('#scrollDir').append($(this).attr('id') + ' right'); 
     } 

     $('#scrollDir').append('<br />'); 

     scrollData.x = $(this).scrollLeft(); 
     scrollData.y = $(this).scrollTop(); 
     $(this).data('scroll', scrollData); 
    }); 
}); 

Answer 2

Vous pouvez stocker la valeur de défilement précédente et vérifier si la valeur a augmenté ou diminué:

var prev = $('#myDiv').scrollTop(); 
$('#myDiv').scroll(function(eventData) { 
    var cur = $(this).scrollTop(); 
    if (cur > prev) { 
    // scrolled down 
    } else { 
    // scrolled up 
    } 
    prev = cur; 
});