Как я могу сказать, каким образом прокрутка панели прокручивается в 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);
    });
});

Answer 2

Вы можете сохранить предыдущее значение прокрутки и проверить, увеличилось или уменьшилось значение:

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