Problem mit Schwung Scrollen auf iPad App

Question

Auf meiner Seite habe ich zwei Bereiche, wo das linke Feld enthält eine Liste von Elementen übereinander gestapelt und wenn ich klicke/wählen Sie eines der Elemente, mehr Informationen über das ausgewählte Element wird im rechten Bereich angezeigt. Ich brauchte die rechte Tafel scrollbaren so hinzugefügt nativ-ähnlicher Impuls zu dieser Platte wie unten scrollen zu sein -

#rightPanel { 
    position:absolute; 
    top:50px; 
    height:400px; 
    width:500px; 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
} 

Um durch die Liste der Elemente im linken Bereich zu bewegen, ich habe hinzugefügt einzige Fingerbewegung. Es funktioniert gut, aber wenn ich für das nächste Element wische, ist das rechte Panel bereits gescrollt, was nicht erwünscht ist. Um dieses Problem zu beheben, wurde diese kleine Routine hinzugefügt und der Inhalt von rightPanel wird bei jedem Swipe nach oben verschoben, aber es gibt eine beträchtliche Verzögerung, die das Gefühl hat, dass der Inhalt langsam geladen wird.

var scrollStopper = function() { 
if ((swipe == 'right') || (swipe == 'left')) 
    document.getElementById("rightPanel").scrollTop = 0; 

document.getElementById('rightPanel').addEventListener('scroll', scrollStopper); 

Jetzt ohne Moment Scrolling Dinge funktionieren wie erwartet. Irgendwelche Ideen, wie man bei jedem Swipe das rechte Panel zurück nach oben scrollt, ohne die Verzögerung zu verursachen?

Answer 1

Sie könnten eine schnellere Antwort von Ihrem UI mit bekommen:

document.getElementById('leftPanel').addEventListener('touchstart', scrollStopper); 

Es sollte, sobald der Benutzer mit der linken Seite durch interagiert das rechte Feld seine Scroll-Snap bedeutet, dass.

Answer 2

Dies passiert, weil in Safari unter iOS das Ereignis scroll nur am Ende des Bildlaufs ausgelöst wird (dh wenn der Finger eine Bewegung auf dem Bildschirm beendet).

Eine ähnliche Frage wurde beantwortet: javascript scroll event for iPhone/iPad?

Alternativ könnten Sie versuchen touchSwipe plugin zu verwenden, um die Richtung und die Dauer des Swipe zu erfassen und die Funktion, sobald die Swipe laufen die gewünschten treshold gefüllt haben.

Hier Feuer ich die Funktion nach einer Entfernung von 10px (wahrscheinlich eine höhere Schwelle sollte wirklich schnell, da diese verwendet werden Trigger - bereits auf einem minimalen Finger bewegen - aber sollte die Logik feinen mitströmen):

$(document).swipe(
    { 
     // touchSwipe handler triggered for every phase of the swipe. This handler is constantly fired for the duration of the pinch. This is triggered regardless of swipe thresholds. 
     swipeStatus: function (event, phase, direction, distance, duration, fingers) 
     { 
      // check if we swiped more than 10px to the left 
      if (distance > 10 && direction == 'left') { 
       document.getElementById("rightPanel").scrollTop = 0; 
      } 
      // check if we swiped more than 10px to the right     
      else if (distance > 10 && direction == 'right') 
      { 
       document.getElementById("rightPanel").scrollTop = 0; 
      } 
     } 
    } 
); 

Allerdings kann ich nicht sagen, dass dies wirklich kugelsicher ist, da ich nur auf dem iPad getestet habe - ich glaube, es müsste noch Feinabstimmung und Sie könnten die Erkennung immer bis auf blankes JavaScript mit der gleichen Code-Logik, wenn die Verwendung von Plugins keine Option ist .

Live-Probe - auch nach oben und unten Swipe-Veranstaltungen, darunter:

http://easwee.net/code-samples/touch-swipe-instant/

(ändert Farben auf Swipe - rot = links, blau = rechts, grün = up, orange = down)

Answer 3

Um das systemeigene Scrollen auf ios aktiv zu halten, platzieren Sie die Elemente, die Sie durchsuchen möchten, in ein untergeordnetes Element, in dem das übergeordnete Element den Überlauf css hat.

Answer 4

Wenn Sie die Lösung, die ich hier umgesetzt mögen:

http://proton.orangehilldev.com/documentation.html

Teil der CSS ist nicht so komplex, können Sie es mit Browser-Inspektoren überprüfen können, oder ich kann es später schreiben, wenn Sie können nicht verstehen es auf eigene Faust.Wie für JS, das ist, was ich verwendet habe:

// Disables scroll except for allowed elements that prevent touchmove event propagation 
    $(document).on('touchmove', function(event){ 
     event.preventDefault(); 
    }); 
    // Elements which are allowed touchmove event (by stopping event propagation to document) 
    $('body').on('touchmove','.scrollable, nav', function(event) { 
     event.stopPropagation(); 
    }); 
    // Prevents scrollable elements from ever reaching the end of scroll, and thus prevents scroll overflow on ipad 
    $('body').on('touchstart','.scrollable', function(event) { 
     if (event.currentTarget.scrollTop === 0) { 
      event.currentTarget.scrollTop = 1; 
     } 
     else if (event.currentTarget.scrollHeight === event.currentTarget.scrollTop + event.currentTarget.offsetHeight) { 
      event.currentTarget.scrollTop -= 1; 
     } 
    });