jQuery 如何检测jQuery中的水平滚动?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7076763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 23:22:29  来源:igfitidea点击:

How to detect horizontal scrolling in jQuery?

jqueryscroll

提问by Aharon Muallem

How do I detect horizontal scrolling with jQuery?

如何使用 jQuery 检测水平滚动?

This will get all scrolls:

这将获得所有卷轴:

$(window).scroll(function () {
    alert('in');
});

I want just the horizontal one.

我只想要水平的。

回答by alex

This seems to work.

这似乎有效。

var lastScrollLeft = 0;
$(window).scroll(function() {
    var documentScrollLeft = $(document).scrollLeft();
    if (lastScrollLeft != documentScrollLeft) {
        console.log('scroll x');
        lastScrollLeft = documentScrollLeft;
    }
});

jsFiddle.

js小提琴

回答by dunderwood

An update that shows direction left or right in a horizontal scroll based on code above:

根据上面的代码在水平滚动中显示向左或向右方向的更新:

var lastPos = 0;
$(window).scroll(function() {
    var currPos = $(document).scrollLeft();

    if (lastPos < currPos) {
        console.log('scroll right');
    } 
    if (lastPos > currPos) 
    {
        console.log('scroll left');
    }

    lastPos = currPos;
});

Test it at http://jsfiddle.net/EsPk7/7/

http://jsfiddle.net/EsPk7/7/测试它

回答by dantiston

dunderwood's jsFiddle link didn't actually contain his code. I've forked his jsFiddle with what a mixture of what he posted here and what's on the jsFiddle:

dunderwood 的 jsFiddle 链接实际上并不包含他的代码。我已经将他的 jsFiddle 与他在这里发布的内容和 jsFiddle 上的内容混合在一起:

var lastPos = 0;
$(window).scroll(function() {
    var currPos = $(document).scrollLeft();

    if (lastPos < currPos) {
        $('#current').html('Right');
    }
    if (lastPos > currPos) {
        $('#current').html('Left');
    }

    lastPos = currPos;
});

http://jsfiddle.net/kuVK8/

http://jsfiddle.net/kuVK8/

回答by mahtab

window.onresize = function() { 
    if ( $("div").outerWidth() < $("div").get(0).scrollWidth ) {
        console.log("foo bar scrollbar");
    } else {
        console.log(" no scrolling ");
    }
};