jquery mousewheel水平滚动在触控板上。避免deltaX和deltaY之间的冲突

时间:2013-08-16 14:20:37

标签: javascript jquery mousewheel

我将jquery mousewheel插件用于水平滚动网站。垂直鼠标滚轮移动转换为水平滚动。 使用触控板时,会出现冲突,因为有时不清楚是向右还是向左滚动。 (例如,如果您在触控板上向右上移动)

如何在此页面上顺利完成此工作:http://www.yangrutherford.com/en/work

$('#scroll').on('mousewheel', function(event, delta, deltaX, deltaY) {
    this.scrollLeft -= (delta * 1.5);
    event.preventDefault();
});

1 个答案:

答案 0 :(得分:2)

我没有带有垂直滚轮的鼠标,但我认为无论哪个增量组件更大都显示用户的意图。这适用于我,除非移动非常慢或用户在任何方向上以45度移动:

$('#scroll').on('mousewheel',function(event, delta, deltaX, deltaY) {
    event.preventDefault();

    //use whichever component (deltaX or deltaY) that has the largest absolute value
    // deltaX needs negated to have natural scroll motion
    var singleDelta = (Math.abs(deltaX)>Math.abs(deltaY)) ? (-1 * deltaX) : deltaY;

    this.scrollLeft-= (singleDelta * 1.5);
});