Zweifinger Scroll js auf Touchpad

Question

Wir haben eine Seite entwickelt, die horizontal ausgerichtet ist und Touchpad-Steuerung mit zwei Fingern nach links/rechts bewegen soll.

Wenn Sie zwei Finger auf dem Touchpad nach links/rechts bewegen, wird auf der Website-Seite nach links/rechts gescrollt. Jetzt haben wir Touchpad-Steuerung mit zwei Fingern nach oben/unten und Seiten gescrollt nach links/rechts implementiert.

Wie können wir Touchpad-Steuerung mit zwei Fingern ändern bewegen von oben/unten nach links/rechts, um Site-Seite nach links/rechts mit js oder jQuery?

Answer 1

Was Sie tun müssen, ist zu ändern, was gescrollt werden kann. Wenn Ihre Seite groß genug ist, wo Links/Rechts-Scrollen sinnvoll ist, erlaubt der Browser das Scrollen auf diese Weise.

Wenn Sie nur möchten, dass sie nur in eine bestimmte Richtung scrollen, erstellen Sie nur Inhalte in diese Richtung. Bei Bedarf können Sie dies erreichen, indem Sie ein Container-div mit der gewünschten Größe erstellen, wobei der Überlauf auf "Keine" gesetzt ist.

Answer 2

Normalerweise, wenn Sie über Touch-Ereignisse in Skript nehmen möchten, fügen Sie so etwas wie dies die übliche Scroll- und Zoom zu verhindern:

$("body").bind("touchstart", function(e) { 
    e.preventDefault(); 
}) 

Answer 3

ich ein wenig spät sein kann, aber hatte die gleiche Frage, bevor ich stolperte über diese Frage. Ein wenig weiter Untersuchung führte mich zu der Meinung, dass die beste Wette, um Trackpad Scrollen zu erfassen wäre die wheel Veranstaltung.

function doScroll(e) { 
    // positive deltas are top and left 
    // down and right are negative 

    // horizontal offset e.deltaX 
    // vertical offset  e.deltaY 

    console.log(`x:${e.deltaX} y:${e.deltaY}`); 

    e.preventDefault(); // disable the actual scrolling 
} 

window.addEventListener("wheel", doScroll, false); 

Ich habe a fiddle vorbereitet, dass Sie die Scroll-Richtung und Offset-Werte zeigt, sondern verhindert die selbst scrollen.

Die wheel event verfügt über eine Delta-Eigenschaft, die (zumindest in Chrome) für Impuls empfindlich ist und Ihnen den aktuellen relativen Bildlaufversatz und nicht die absolute Bildlaufposition im scroll-Ereignis angibt.