jquery 鼠标滚轮在触控板上水平滚动。避免 deltaX 和 deltaY 之间的冲突答案

【问题标题】：jquery mousewheel horizontal scrolling on trackpad. avoid conflicts between deltaX and deltaYjquery 鼠标滚轮在触控板上水平滚动。避免 deltaX 和 deltaY 之间的冲突
【发布时间】：2013-08-16 14:20:37
【问题描述】：

我使用 jquery mousewheel 插件来做一个水平滚动的网站。垂直鼠标滚轮移动转换为水平滚动。使用触控板时，会出现冲突，因为有时不清楚是向右还是向左滚动。（例如，如果您在触控板上移动右上角）

我怎样才能像在这个页面上一样顺利地完成这项工作：http://www.yangrutherford.com/en/work

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

【问题讨论】：

你最后做了什么？

标签： javascript jquery mousewheel

【解决方案1】：

我没有带有仅垂直滚轮的鼠标，但我认为无论哪个 delta 组件较大，都显示了用户的意图。这对我有用，除非移动非常缓慢或用户向任何方向移动 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);
});

【讨论】：