Ich arbeite an einer iPad-basierten Web-App und muss ein Überschreiben verhindern, damit es weniger wie eine Webseite wirkt. Ich verwende dies derzeit, um das Ansichtsfenster einzufrieren und Overscroll zu deaktivieren:
document.body.addEventListener('touchmove',function(e){
e.preventDefault();
});
Dies funktioniert hervorragend, um Overscroll zu deaktivieren, aber meine App verfügt über mehrere scrollbare Divs, und der obige Code verhindert, dass sie scrollen .
Ich ziele nur auf iOS 5 und höher ab, um Hacky-Lösungen wie iScroll zu vermeiden. Stattdessen verwende ich dieses CSS für meine scrollbaren Divs:
.scrollable {
-webkit-overflow-scrolling: touch;
overflow-y:auto;
}
Dies funktioniert ohne das Dokument-Overscroll-Skript, löst jedoch nicht das Div-Scrolling-Problem.
Gibt es ohne ein jQuery-Plugin eine Möglichkeit, den Overscroll-Fix zu verwenden, aber meine $ ('. Scrollable') Divs auszunehmen?
BEARBEITEN:
Ich habe etwas gefunden, das eine anständige Lösung ist:
// Disable overscroll / viewport moving on everything but scrollable divs
$('body').on('touchmove', function (e) {
if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
});
Das Ansichtsfenster bewegt sich immer noch, wenn Sie über den Anfang oder das Ende des Divs scrollen. Ich würde gerne einen Weg finden, dies ebenfalls zu deaktivieren.
Antworten:
Dies löst das Problem, wenn Sie über den Anfang oder das Ende des Divs scrollen
Beachten Sie, dass dies nicht funktioniert, wenn Sie das Scrollen ganzer Seiten blockieren möchten, wenn ein Div keinen Überlauf hat. Um dies zu blockieren, verwenden Sie den folgenden Ereignishandler anstelle des unmittelbar oben genannten (angepasst an diese Frage ):
quelle
.scrollable
direktes Targeting (was ich ursprünglich versucht hatte, um dieses Problem zu lösen). Wenn Sie ein JavaScript-Neuling sind und einfachen Code benötigen, um diese Handler irgendwo auf der ganzen Linie zu entfernen, funktionieren diese beiden Zeilen hervorragend für mich!$(document).off('touchmove');
UND$('body').off('touchmove touchstart', '.scrollable');
Die exzellente Antwort von Tyler Dodge blieb auf meinem iPad immer wieder zurück, daher habe ich einen Drosselungscode hinzugefügt, der jetzt ziemlich flüssig ist. Beim Scrollen wird manchmal nur minimal übersprungen.
Durch Hinzufügen des folgenden CSS werden außerdem einige Rendering-Fehler ( Quelle ) behoben :
quelle
Verhindern Sie zunächst wie gewohnt Standardaktionen für Ihr gesamtes Dokument:
Verhindern Sie dann, dass Ihre Elementklasse auf Dokumentebene weitergegeben wird. Dies verhindert, dass die oben genannte Funktion erreicht wird, und daher wird e.preventDefault () nicht initiiert:
Dieses System scheint natürlicher und weniger intensiv zu sein als die Berechnung der Klasse bei allen Berührungsbewegungen. Verwenden Sie für dynamisch generierte Elemente .on () anstelle von .bind ().
Berücksichtigen Sie auch diese Meta-Tags, um zu verhindern, dass bei der Verwendung Ihres scrollbaren div unglückliche Dinge passieren:
quelle
Können Sie Ihrem Overscroll-Deaktivierungscode etwas mehr Logik hinzufügen, um sicherzustellen, dass das betreffende Zielelement nicht das ist, das Sie scrollen möchten? Etwas wie das:
quelle
Die beste Lösung hierfür ist css / html: Erstellen Sie ein Div, in das Sie Ihre Elemente einwickeln können, falls Sie es noch nicht haben, und stellen Sie es so ein, dass es fest und der Überlauf verborgen ist. Optional können Sie Höhe und Breite auf 100% einstellen, wenn der gesamte Bildschirm und nur der gesamte Bildschirm ausgefüllt werden soll
quelle
Überprüfen Sie, ob das scrollbare Element beim Scrollen nach oben bereits nach oben oder beim Scrollen nach unten nach unten gescrollt ist, und verhindern Sie dann, dass die Standardaktion verhindert, dass sich die gesamte Seite bewegt.
quelle
Ich habe nach einer Möglichkeit gesucht, das Scrollen des gesamten Körpers zu verhindern, wenn ein Popup mit einem scrollbaren Bereich angezeigt wird (ein Popup "Einkaufswagen" mit einer scrollbaren Ansicht Ihres Warenkorbs).
Ich habe eine weitaus elegantere Lösung mit minimalem Javascript geschrieben, um die Klasse "noscroll" auf Ihrem Körper einfach umzuschalten, wenn Sie ein Popup oder div haben, das Sie scrollen möchten (und nicht den gesamten Seitenkörper "überrollen").
Während Desktop-Browser einen Überlauf beobachten: versteckt - iOS scheint dies zu ignorieren, es sei denn, Sie setzen die Position auf fest ... was dazu führt, dass die gesamte Seite eine seltsame Breite hat, sodass Sie die Position und Breite auch manuell einstellen müssen. benutze dieses CSS:
und diese Frage:
quelle
Ich habe ein wenig Workarround ohne Abfrage gearbeitet. Nicht perfert, funktioniert aber gut (besonders wenn Sie ein Scroll-X in einem Scoll-Y haben) https://github.com/pinadesign/overscroll/
Fiel frei, um teilzunehmen und es zu verbessern
quelle
Diese Lösung erfordert nicht, dass Sie eine scrollbare Klasse auf alle Ihre scrollbaren Divs setzen, ist also allgemeiner. Das Scrollen ist für alle Elemente zulässig, die INPUT-Elemente contenteditables und Überlauf-Scrolling oder Autos sind oder untergeordnete Elemente sind.
Ich verwende einen benutzerdefinierten Selektor und speichere auch das Ergebnis der Prüfung im Element zwischen, um die Leistung zu verbessern. Sie müssen nicht jedes Mal dasselbe Element überprüfen. Dies kann ein paar Probleme haben, wie gerade geschrieben, aber dachte, ich würde teilen.
quelle
Das Deaktivieren aller "touchmove" -Ereignisse scheint eine gute Idee zu sein. Sobald Sie andere scrollbare Elemente auf der Seite benötigen, kann dies zu Problemen führen. Wenn Sie außerdem "touchmove" -Ereignisse nur für bestimmte Elemente deaktivieren (z. B. body, wenn die Seite nicht scrollbar sein soll), führt IOS bei der URL zu einer unaufhaltsamen Weitergabe in Chrome, sobald sie an einer anderen Stelle aktiviert wird Bar schaltet um.
Obwohl ich dieses Verhalten nicht erklären kann, scheint es der einzige Weg zu sein, dies zu verhindern, die Position des Körpers zu bestimmen
fixed
. Das einzige Problem dabei ist, dass Sie die Position des Dokuments verlieren - dies ist beispielsweise bei Modalen besonders ärgerlich. Eine Möglichkeit, dies zu lösen, besteht darin, diese einfachen VanillaJS-Funktionen zu verwenden:Mit dieser Lösung können Sie ein festes Dokument haben und jedes andere Element auf Ihrer Seite kann mithilfe von einfachem CSS (z
overflow: scroll;
. B. ) überlaufen . Keine Notwendigkeit für spezielle Klassen oder irgendetwas anderes.quelle
Hier ist eine zeptokompatible Lösung
quelle
Dieser funktioniert für mich (einfaches Javascript)
html:
quelle
Versuchen Sie dies. Es wird perfekt funktionieren.
quelle
Ich hatte überraschendes Glück mit einfach:
Es funktioniert hervorragend, um das Überschreiben für Popups oder Menüs zu deaktivieren, und es erzwingt nicht, dass Browserleisten angezeigt werden, wenn Position: fest verwendet wird. ABER - Sie müssen die Bildlaufposition speichern, bevor Sie die feste Höhe einstellen, und sie wiederherstellen, wenn Sie das Popup ausblenden. Andernfalls wird der Browser nach oben scrollen.
quelle