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;
});

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

2 个答案: