2013-04-19 6 views
7

Ist es möglich, Kraft-stoppen Moment Scrollen auf iPhone/iPad in Javascript?force-stop momentum scrollen auf iphone/ipad in javascript

Extra: ziemlich sicher, das ist Torte in den Himmel, aber für Bonuspunkte (Ehre und Kudos), nach Dom-Manipulation und einem scrollTo angewendet, Scroll mit dem gleichen Impuls vor dem erzwungenen Stopp fortsetzen. Wie man?

+2

Haben Sie die Scroll-Position versucht, Einstellung und Deaktivieren von Überlauf auf den Körper/html? Es kann auch möglich sein, den Bildlauf fortzusetzen. Schauen Sie sich die Bildlaufereignisse vor dem Anhalten an und berechnen Sie Ihren 'dy'. Sie müssen jedoch einen guten Schätzwert für einen Wert der _Friction_ bekommen (wie schnell es langsamer wird). – Halcyon

+0

Wenn ich deine Frage richtig verstanden habe, denke ich, dass ich sie hier beantwortet habe: [Programmatisch halt -webkit-overflow-scrolling] (http://stackoverflow.com/questions/14770891/programatically-halte-webkit-overflow-scrolling/14771980#14771980) – insertusernamehere

+0

OK Leute danke.Schreibe, wie reell es ist, das letzte 'dy' zu bekommen und von dort zu gehen. –

Antwort

7

Dies ist eigentlich sehr möglich, wenn Sie fastclick.js verwenden. Die lib entfernt die 300ms-Klickverzögerung auf Mobilgeräten und ermöglicht die Erfassung von Ereignissen während des Schwung-/Impuls-Scrollings.

Nach Fastclick einschließlich und an das Körperelement angebracht wird, meinen Code zu stoppen und nach oben scrollen sieht wie folgt aus:

scrollElement.style.overflow = 'hidden'; 
scrollElement.scrollTop = 0; 
setTimeout(function() { 
    scrollElement.style.overflow = ''; 
}, 10); 

Der Trick ist overflow: hidden zu setzen, die die Trägheit/Impuls nicht mehr steigt . Bitte sehen Sie meine Geige für eine vollständige Implementierung von stop scrolling during inertia/momentum.

+5

Zurücksetzen des Überlaufs auf ausgeblendet, dann zurück zu Auto oder Scroll ist eine solide Lösung ohne fastclick.js zu verwenden. Vergiss die Auszeit nicht! – abriggs

+0

Dies ist die erste Antwort, die ich gefunden habe, die einfach ist und Cross-Browser funktioniert. Beachten Sie, dass 'timeOut' nicht auf' 0' gesetzt werden kann –

0

Hier ist mein Code jQuery Animation mit (läuft als Onclick-Ereignis)

var obj=$('html, body'); // your element 

if(!obj.is(':animated')) { 

    obj.css('overflow', 'hidden').animate({ scrollTop: 0 }, function(){ obj.css('overflow', ''); }); 

} 

Getestet auf iPhone 6