¿Cómo puedo saber de qué forma se desplaza un panel de desplazamiento en javascript?

Question

Tengo el siguiente jQuery para controlar los eventos de desplazamiento en un div particular y escribir algún contenido:

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

Obviamente, evt.isGoingUp en realidad no existe. ¿Hay algo que exista que pueda lograr esta lógica?

Answer 1

Esperamos que esta solución es útil para usted ... que funcionará en todos los elementos con nombre de la clase 'scroll- pista'. También debe proporcionar un nuevo atributo al elemento desplazable: datos de desplazamiento = '{ "x": "0", "y": "0"}' puede probarlo aquí: 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

Se puede almacenar el valor de desplazamiento anterior y comprobar si el valor ha aumentado o disminuido:

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