如何判断滚动窗格在javascript中滚动的方式？

Question

我有以下jquery来处理特定div上的滚动事件并写一些内容:

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

显然,evt.isGoingUp实际上并不存在.有没有可以实现这种逻辑的东西？

Answer 1

希望这个解决方案对您有用...它将适用于类名为“scroll-track”的所有元素。您还必须为可滚动元素提供一个新属性： data-scroll='{"x":"0", "y":"0"}' 您可以在此处测试它： 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);
    });
});