jquery - 如何判断滚动 Pane 在 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);
    });
});