Einschränken des Kendo-Rasters zum Scrollen in einer Richtung auf dem Touchscreen

Question

Wenn sich ein Benutzer auf einem Touchscreen-Gerät befindet, möchte ich das Diagonal-Scrollen einschränken - so ist das Scrollen in eine Richtung - horizontal - zu erzwingen oder vertikal.

Ich habe eine JS Fiddle eingerichtet, die erkennt, ob Touch Scrolling aktiviert ist und ich kann die x und y Koordinaten ausgeben. Aber ich sehe keinen Offset oder irgendetwas und eine Zahl, die ich brauche, um die beabsichtigte Richtung zu berechnen.

Ich weiß, dass Apple eine directionalLockEnabled verwendet, die einschränken wird, also frage ich mich, ob so etwas in Kendo verfügbar ist. Wenn nicht, kann ich vielleicht herausfinden, in welche Richtung der Benutzer scrollen will und die andere Koordinate "einfrieren".

A JS Geige ich erstellt (relevanter Teil in der dataBound-Methode):

http://jsfiddle.net/dmathisen/tskebcqp/

(der entsprechende Code funktioniert nur auf Berührung ... aber sollte funktionieren, wenn Sie Handy-Emulation in dev-Tools ermöglichen)

Ein weiteres Problem ist die Häufigkeit, mit der das Scroll-Ereignis ausgelöst wird. Wenn ich arbeite, kann ich vielleicht eine Entprellung einrichten, um zu verarbeiten, wie oft es ausgelöst wird.

Answer 1

Wenn Sie Javascript für diesen Fix verwenden möchten, können Sie die Bereiche der X- und Y-Bewegungen berechnen. dass für mit Touch-Geräten, die Start Posi X und Y, wenn Berührungsstart und die Abstände Càlcul wenn Berührungsbewegungs

var touchY = touchX = 0; 
    $(document).delegate('.yourWrap', 'touchstart', function(e){ 
     touchX = e.originalEvent.touches[0].pageX; 
     touchY = e.originalEvent.touches[0].pageY; 
    }); 
    $(document).delegate('.yourWrap', 'touchmove', function(e){ 

     if (Math.abs(touchX - e.originalEvent.touches[0].pageX) 
      > Math.abs(touchY - e.originalEvent.touches[0].pageY)) { 
      // Block overflow-y 
     } else { 
      // Block overflow-x 
     } 
     touchX = e.originalEvent.touches[0].pageX; 
     touchY = e.originalEvent.touches[0].pageY; 
    }); 

Für Rad-Geräte, delta

(e.wheelDeltaY/3 || -e.deltaY) 
(e.wheelDeltaX/3 || -e.deltaX)