Ich arbeite an einer browserbasierten App. Derzeit entwickle und gestalte ich sie für den iPad-Safari-Browser.
Ich suche nach zwei Dingen auf dem iPad: Wie kann ich das vertikale Scrollen für Seiten deaktivieren, die es nicht benötigen? & wie kann ich den elastischen Bounce-Effekt deaktivieren?
ipad
scroll
mobile-safari
bounce
Adam
quelle
quelle
Antworten:
Diese Antwort gilt nicht mehr, es sei denn, Sie entwickeln für ein sehr altes iOS-Gerät ... Weitere Lösungen finden Sie hier
Antwort 2011: Für eine Web- / HTML-App, die in iOS Safari ausgeführt wird, möchten Sie so etwas wie
Für iOS 5 möchten Sie möglicherweise Folgendes berücksichtigen: document.ontouchmove und Scrollen unter iOS 5
Update September 2014: Einen gründlicheren Ansatz finden Sie hier: https://github.com/luster-io/prevent-overscroll . Informationen dazu und viele nützliche Tipps für Webanwendungen finden Sie unter
http://www.luster.io/blog/9-29-14-mobile-web-checklist.htmlUpdate März 2016: Dieser letzte Link ist nicht mehr aktiv - siehe https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist .html für die archivierte Version. Vielen Dank an @falsarella für den Hinweis.
quelle
onTouchMove: function(e) { e.stopPropagation(); e.stopImmediatePropagation(); }
Sie hinzu. Es verhindert, dass das Ereignis den Körper trifft, aber der Körper bleibt nicht hüpfend. Bearbeiten: Dies setzt voraus, dass Sie $ ('div'). On ('touchmove', ... onTouchMove) setzen;Sie können auch die Position des Körpers / HTML in fest ändern:
quelle
Um das Scrollen in modernen mobilen Browsern zu verhindern, müssen Sie das passive: false hinzufügen. Ich hatte mir die Haare ausgezogen, damit das funktioniert, bis ich diese Lösung gefunden hatte. Ich habe dies nur an einer anderen Stelle im Internet erwähnt gefunden.
quelle
{ passive: false }
funktioniert es definitiv nicht !!! Willkommen auf StackOverflow Dudeoverflow-y: scroll
? Zum Beispiel ein Modal mit einer größeren Ansichtshöhe als der Körper.Sie können dieses jQuery-Code-Snippet verwenden, um dies zu tun:
Dies blockiert das vertikale Scrollen und auch alle auf Ihren Seiten auftretenden Bounce-Back-Effekte.
quelle
Auf dem Container können Sie den Bounce-Effekt innerhalb des Elements festlegen
Quelle: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
quelle
overflow:hidden
dem<body>
ist dies immer noch die beste Lösung. Wenn Sie jedoch die Tastatur öffnen oder über den unteren Bildschirmrand gleiten, funktioniert dies nicht mehr.Ich weiß, dass dies etwas abseits der Piste liegt, aber ich habe Swiffy verwendet, um Flash in ein interaktives HTML5-Spiel umzuwandeln, und bin auf dasselbe Scrolling-Problem gestoßen, habe aber keine funktionierenden Lösungen gefunden.
Das Problem, das ich hatte, war, dass die Swiffy-Bühne den gesamten Bildschirm einnahm. Sobald sie geladen war, wurde das Dokument-Touchmove-Ereignis nie ausgelöst.
Wenn ich versuchte, dasselbe Ereignis zum Swiffy-Container hinzuzufügen, wurde es ersetzt, sobald die Bühne geladen war.
Am Ende habe ich es (ziemlich chaotisch) gelöst, indem ich das Touchmove-Ereignis auf jeden DIV innerhalb der Bühne angewendet habe. Da sich diese Divs auch ständig änderten, musste ich sie weiter überprüfen.
Dies war meine Lösung, die gut zu funktionieren scheint. Ich hoffe, es ist hilfreich für alle anderen, die versuchen, die gleiche Lösung wie ich zu finden.
quelle
Code zum Entfernen der iPad-Safari: Deaktivieren Sie das Scrollen und den Bounce-Effekt
Wenn Sie ein Canvas- Tag im Dokument haben, wirkt sich dies manchmal auf die Benutzerfreundlichkeit des Objekts im Canvas-Bereich aus (Beispiel: Bewegung des Objekts). Fügen Sie also den folgenden Code hinzu, um das Problem zu beheben.
quelle
Versuchen Sie diese JS sollutuion :
Verhindert standardmäßige Safari-Bildlauf- und Bounce-Gesten, ohne die Listener für Berührungsereignisse zu trennen.
quelle
Keine der Lösungen funktioniert für mich. So mache ich es.
quelle
In iPhone getestet. Verwenden Sie dieses CSS einfach für den Zielelementcontainer und es ändert das Bildlaufverhalten, das stoppt, wenn der Finger den Bildschirm verlässt.
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
quelle
Für diejenigen, die MyScript verwenden, die Web-App und Probleme mit dem Scrollen / Ziehen des Körpers (auf iPad und Tablets) haben, anstatt tatsächlich zu schreiben:
<body touch-action="none" unresolved>
Das hat es für mich behoben.
quelle
Sie können js verwenden, um das Scrollen zu verhindern:
Und dann einfach die Funktion ausführen / stoppen,
toggleScroll
wenn Sie modal öffnen / schließen.So was
toggleScroll(true) / toggleScroll(false)
(Dies ist nur für iOS, unter Android funktioniert nicht)
quelle
Probieren Sie diese JS-Lösung aus, die den
webkitOverflowScrolling
Stil umschaltet . Der Trick dabei ist, dass dieser Stil deaktiviert ist, Mobile Safari zum normalen Scrollen übergeht und ein Überspringen verhindert - leider kann es das laufende Ziehen nicht abbrechen. Diese komplexe Lösung verfolgt auch,onscroll
wie ein Sprung über die Oberseite einscrollTop
Negativ erzeugt, das verfolgt werden kann. Diese Lösung wurde unter iOS 12.1.1 getestet und hat einen einzigen Nachteil: Während der Beschleunigung des Bildlaufs tritt immer noch ein einzelner Übersprung auf, da das Zurücksetzen des Stils ihn möglicherweise nicht sofort abbricht.quelle
verbesserte Antwort @Ben Bos und kommentiert von @Tim
Dieses CSS hilft dabei, Bildlauf- und Leistungsprobleme beim erneuten Rendern von CSS zu vermeiden, da sich die Position ohne Breite und Höhe geändert hat / nur wenig verzögert
quelle
Für diejenigen unter Ihnen, die das Abprallen nicht loswerden möchten, sondern nur wissen möchten, wann es aufhört (z. B. um eine Berechnung der Bildschirmabstände zu starten), können Sie Folgendes tun (Container ist das überlaufende Containerelement):
quelle
Deaktivieren Sie den Safari Bounce Scrolling-Effekt:
quelle
Ähnlich wie bei der wütenden Kiwi habe ich sie eher mit der Höhe als mit der Position zum Laufen gebracht:
quelle
Lösung getestet, funktioniert unter iOS 12.x.
Dies ist ein Problem, auf das ich gestoßen bin:
Während ich durch meine Galerie scrolle, scrollt der Körper immer selbst (menschliches Streichen ist nicht wirklich horizontal), was meine Galerie unbrauchbar macht.
Folgendes habe ich getan, während meine Galerie mit dem Scrollen begonnen hat
Und wenn meine Galerie das Scrollen beendet ...
Hoffe das hilft ~
quelle