JQuery колесо мыши горизонтальная прокрутка с трекпадом

Question

Я использую плагин jquery.mousewheel.js (Github) для создания горизонтального веб-сайта прокрутки. Он работает до сих пор, но я не могу разобраться в одной проблеме:

Если я использую трекпад (например, на MacBook Pro) и прокручиваю его по горизонтали двумя пальцами, в зависимости от того, как расположены параллельные пальцы, сайт застревает или путается, в каком направлении он должен прокручиваться.

Есть ли способ сделать этот горизонтальный свиток также гладким?

Это код, который я использую в головной части:

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

Вот мой jsfiddle с реконструированной ситуации: 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(); 

});