jquery - 如何检查用户向左或向右滚动？

Question

如何检查用户向左或向右滚动？

下面的代码是我试过但没用的....

$('.inner').scroll(function(){
    console.log('scroll');
    ol = $('.inner').scrollLeft();
    if(ol > $('.inner').scrollLeft()){
        //  console.log('right');
        //  ol = $('.inner').scrollLeft();
    }else{
        //  console.log('left');
        //  ol = $('.inner').scrollLeft();
    }
});

Answer 1

我已经尝试了另一种解决该问题的方法，您可以在此处找到它正在运行。

我所做的是以下内容：

jQuery(document).ready(
    function($)
    {
        var lastLeftLocation = 0;

        $('.inner').scroll(
            function(e)
            {               
                if(lastLeftLocation > $(this).scrollLeft())
                {
                    console.log('It goes left');
                }
                else
                {
                    console.log('It goes right');
                }

                lastLeftLocation     =    e.currentTarget.scrollLeft;
            }
        );
    }
);

Answer 2

我不确定您的 HTML 标记看起来如何，但您必须保存scrollLeft容器并在滚动时进行比较。我还添加了一些逻辑来检测滚动开始和结束的时间。

var container = $('.outer');
var initVal = container.scrollLeft();
var isScrolling = false;
container.scroll(function(e){
    var curVal = container.scrollLeft();
    if (!isScrolling) {
        $(window).one("mouseup", function(e){
            console.log("Stopped scrolling at", container.scrollLeft());
            isScrolling = false;
        });
        console.log("Started scrolling at", curVal);
    }    
    if (curVal === initVal) return;
    if (curVal > initVal) {
        console.log("Scrolling right");
    } else {
        console.log("Scrolling left");
    }
    initVal = curVal;
    isScrolling = true;
});

请参阅jsFiddle 上的测试用例。