Detaillierte Erklärung des Overflow-Scrollens zur Lösung des Scroll-Lag-Problems

Vorwort

Wenn Sie das Attribut „overflow: scroll“ für ein Div oder Modul verwenden, kommt es beim Surfen auf einem iOS-Telefon zu deutlichen Verzögerungen. Auf Android-Telefonen tritt dieses Problem jedoch nicht auf.

Problemumgehung

Der folgende Code kann dieses Verzögerungsproblem lösen: -webkit-overflow-scrolling: touch;, da diese Codezeile die Hardwarebeschleunigungsfunktion aktiviert, sodass das Gleiten sehr reibungslos erfolgt. Diese Methode kann das Gleitverzögerungsproblem von iOS5.0- und Android4.0- und späteren Systemen tatsächlich lösen.

-webkit-overflow-scrolling: auto | touch;

auto: Normales Scrollen. Wenn der Finger vom Touchscreen genommen wird, stoppt das Scrollen sofort.

Touch: Scroll-Rebound-Effekt. Wenn der Finger vom Touchscreen genommen wird, wird der Inhalt noch eine Weile weitergescrollt. Die Geschwindigkeit und Dauer des Weiterscrollens sind proportional zur Intensität der Scroll-Geste. Außerdem wird ein neuer Stapelkontext erstellt.

Kompatibles Schreiben

Überlauf: automatisch; /* WinPhone8 und Android4+ */
-webkit-overflow-scrolling: berühren; /* ios5+ */

ps:

1. Wenn das Hinzufügen dieser Eigenschaft nicht funktioniert, fügen Sie overflow-y: scroll hinzu und es wird funktionieren.

2. Wenn ein Element mit der Position „absolute|relative“ festgelegt und dann das Attribut „-webkit-overflow-scrolling: touch;“ hinzugefügt wird, werden Sie feststellen, dass der Scrollbereich nach mehrmaligem Verschieben hängen bleibt und nicht mehr verschoben werden kann. Erhöhen Sie in diesem Fall einfach den Z-Index-Wert des Elements.

Referenzen: https://www.jianshu.com/p/1f4693d0ad2d

https://www.cnblogs.com/wuyinghong/p/7450041.html

Dies ist das Ende dieses Artikels zur Lösung des Problems des Scroll-Stau beim Overflow-Scrollen. Weitere Informationen zum Overflow-Scrollen-Stau finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!