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

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

- user1575921

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

- KodeFor.Me

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 上的测试案例。

- mekwall