如何判断滚动窗格在JavaScript中滚动的方式？ [英] How can I tell which way a scrolling pane is scrolling in javascript?

问题描述

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

I have the following jquery to handle scroll events on a particular div and write some content:

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

显然， evt.isGoingUp 不实际存在。有没有可以实现这个逻辑的东西？

Obviously, evt.isGoingUp doesn't actually exist. Is there anything that does exist that can accomplish this logic?

推荐答案

希望这个解决方案对你有用...它会工作在所有名为'scroll-track'的元素上。您还必须为可滚动元素提供一个新属性：
data-scroll ='{x：0，y：0}'
您可以在这里测试： http://jsfiddle.net/CgZDD/

Hopefully this solution is useful for you... it will work on all elements with class name 'scroll-track'. You must also provide a new attribute to the scrollable element: data-scroll='{"x":"0", "y":"0"}' You can test it here: 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);
    });
});

这篇关于如何判断滚动窗格在JavaScript中滚动的方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！