Bir kaydırma bölmesinin javascript'te hangi yönde ilerlediğini nasıl anlarım?

Question

Belirli bir divdaki kaydırma olaylarını işlemek ve bazı içerik yazmak için aşağıdaki jQueryum var:

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

Açıkçası evt.isGoingUp aslında mevcut değil. Bu mantığı başarabilecek herhangi bir şey var mı?

Answer 1

Umarım bu çözüm yararlıdır scroll- Izlemek'. Burada test edebilirsiniz '{ "0": "y", "0", "x"}': veri kaydırma =: Ayrıca kaydırılabilir elemana yeni bir özellik sağlaması gerekir 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

Bir önceki kaydırma değerini depolamak ve değer artış ya da düşmüş olmasına kontrol edebilir: Eğer ... o sınıf adıyla tüm unsurları üzerinde çalışacak için

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