Question

我正在使用jquery.mousewheel.js插件(Github)来构建一个水平滚动网站。它到目前为止有效，但我无法找出一个问题：

如果我使用触控板（例如在MacBook Pro上）并用两根手指水平滚动，根据手指的平行程度，网站会卡住或混淆它应该向哪个方向滚动。

有没有办法让这个水平滚动也顺畅？

这是我在头部使用的代码：

$(function () {
    $("html, body, *").mousewheel(function (event, delta) {
        this.scrollLeft -= (delta * 5);
        this.scrollRight -= (delta * 5);
        event.preventDefault();
    });
});

这里是我的重建情况：http://jsfiddle.net/mU24m/

Answer 1

即使这个问题已经过了几个月，我也会留下一些对我有用的东西。

这个想法是跟踪板通常在X和Y上同时移动，所以如果我们在滚轮侦听器中检测到水平移动，它很可能是一个触控板。请注意，您只需要向左和向右调整左侧。

$(".container").mousewheel( function(e, delta) {

    if( Math.abs(e.deltaX) ) {
        this.scrollLeft -= (e.deltaX * 20);
    } else {
        this.scrollLeft -= (e.deltaY * 20);
    }

    e.preventDefault();
});

你还记得X上有一个动作，然后只响应那个轴一秒左右：

var timeout, trackpad = false;

$(".modernlayout .wrapper").mousewheel( function(e, delta) {

    if( trackpad || Math.abs(e.deltaX) ) {
        // probably using trackpad
        // only respond on X axis for a second
        trackpad = true; clearTimeout( timeout );
        timeout = setTimeout(function(){ trackpad = false; }, 1000);
        // use a smaller multiplier
        this.scrollLeft -= (e.deltaX * 10);
    } else {
        // most likely not trackpad
        this.scrollLeft -= (e.deltaY * 20);
    }

    e.preventDefault();

});

Jquery鼠标滚轮水平滚动与触控板

1 个答案: