Webseiten auf iOS haben standardmäßig ein "Momentum"-Scrolling, bei dem eine schnelle Bewegung des Fingers die Webseite scrollen lässt und sie sich weiterbewegt, bis sie allmählich langsamer wird und stoppt, als ob Reibung sie verlangsamen würde. Ähnlich wie wenn man einen Hockeypuck über das Eis schieben würde oder so. Man könnte denken, dass jedes Element mit Scrolling dieses Verhalten ebenfalls aufweist, aber das ist nicht der Fall. Sie können es mit einer speziellen Eigenschaft zurückbringen.
.module {
width: 300px;
height: 200px;
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
Hallo Chris,
Gibt es eine Möglichkeit, das Momentum-Scrolling auf Desktops (mit Magic Mouse oder Trackpad) sowie auf iOS zu verhindern? Ich suche schon lange danach, aber ohne Erfolg.
Hallo David, du kannst einen Scroll-Debouncer implementieren, der das Ausführen von nur einem Scroll-Ereignis alle paar Millisekunden begrenzt. Allerdings ist das weit davon entfernt, perfekt zu sein und in mehreren Fällen ziemlich unnatürlich wirken.
Vielleicht schreibe ich dafür ein einfaches Tutorial.
Warum sollte man das jemals tun wollen? Das wäre das nervigste überhaupt.
Du könntest nach Touch-Events mit Modernizr oder ähnlichem suchen und die Regel nur in bestimmten Fällen anwenden.
Das Überprüfen von Touch-Events ist unzuverlässig. Zu viele Falsch-Positive und selbst bei Modernizr empfehlen sie es nicht.
Hey, du könntest versuchen, die @media-Funktion zu nutzen, um die Bildschirmgröße zu ermitteln, und wenn sie klein genug ist, funktioniert der Code, aber wenn sie größer als ein bestimmter Wert ist, funktioniert er nicht, zum Beispiel
Das gilt nur für eine maximale Bildschirmgröße von 768px. Das ist der einfachste Weg und so machen es viele Websites
Wenn ich -webkit-overflow-scrolling:touch verwende, und während die Seite scrollt, klicke ich auf einen Button, um den Container auf scrollTop = 0 zurückzusetzen. Auf iOS oder Android kann es das Scrollen stoppen, aber es kann nicht an den Anfang des Containers gehen.
Hallo, das schien wirklich gut zu funktionieren bis Februar 2019 – seitdem scheint es einige Darstellungsprobleme zu geben – ist das jemand anderem auch schon aufgefallen?
Chris, Momentum-Scrolling funktioniert nicht innerhalb eines iframes. Ich habe verschiedene Einstellungen ausprobiert, auch im Demo-iframe,
http://playground.johanbrook.com/css/touchtest.html
Aber erzeugt 99% der Zeit keine Scrollbalken. Suche nach einem Hack.
Chandra, hast du eine Lösung für Touch-Scrolling auf iframes gefunden? Ich werde wahnsinnig wegen desselben Problems…
Ja, es funktioniert nicht auf iframes. Wenn du den iframe in einen Container einpackst und den
-webkit-overflow-scrolling: touchundoverflow-y: scrolldarauf anwendest, sollte es funktionieren. Siehe dieses Codepen.Kristie, danke für das Codepen-Beispiel – es hat unser Problem vollständig gelöst!
Danke, das funktioniert perfekt!
Hast du etwas, um die Millisekunden Verzögerung beim Klicken auf einen Link auf einem Touch-Gerät zu beheben?
Ich verwende derzeit webkit-touch-scrolling, um die Leistung des Scrollens in iPad- und iPhone-Webanwendungen zu verbessern. Es hat die Leistung erheblich gesteigert, aber wie die meisten Anwendungen, die eine zeitachsenähnliche Umgebung mit Bildern verwenden, geht dem iPad der Speicher aus, wenn viele "Kacheln" geladen wurden.
Gibt es eine Möglichkeit, die Scroll-Position beim Momentum-Scrolling zu verfolgen? Ähnlich wie das 'touchmove'- und 'scroll'-Ereignis? Bisher habe ich viele 'Neins' gesehen.
Meine aktuelle Lösung wäre, eine Variable zu setzen, wenn der Benutzer mit dem Scrollen beginnt, und dann ein setTimeout() auf X Millisekunden zu setzen, um die Scroll-Funktion zu "simulieren".
Das ist nur eine kleine Randbemerkung: Der Grund, warum dir der Speicher ausgeht, ist, dass Apple nur 10 MB RAM für Webanwendungen zulässt. Warum sollten sie dir erlauben, native Apps im Web zu erstellen? Wenn du es könntest, gäbe es keinen Grund, für ihren App Store zu bezahlen. Wir müssen sie zur Rechenschaft ziehen.
Hatte das gleiche Problem wie du, iOS Safari stürzte ab. Ich habe das über einen Tag lang debuggt, weil ich sicher war, dass der Speicherabsturz auf hunderte von leeren Angular hg-repeat-Elementen zurückzuführen war (die Bilder beim Scrollen laden).
Das Lustige ist, dass es beim Debuggen im iOS Simulator nicht auftritt! Noch lustiger ist, dass ich von einem Menü mit position:fixed gewechselt habe, weil das Menü beim Aktivieren eines Eingabefeldes nach unten springt (Rendering stoppt beim Ändern der Fenstergröße), aber gleichzeitig das Eingabefeld zu einem Auswahlfeld geändert habe, das die Tastatur nicht aufruft. Alles in allem habe ich nur einen Fehler implementiert, der gar nicht nötig war, argh!
Für andere, die danach suchen, werde ich hinzufügen, dass der Browser beim Aufrufen von $location.hash(id) und $anchoScroll() abgestürzt ist.
glücklich
Ich habe dein Demo auf Windows Phone (IE10) getestet und beide Divs. scrollten kinetisch.
Das ist nur ein Problem auf iOS. Sowohl Android als auch WP verhalten sich ohne lächerliche proprietäre Stile korrekt.
Genau das, was ich brauchte, Chris!
Und ich glaube, **du kommst aus der Zukunft**, weil du immer vorauszusehen scheinst, was ich als nächstes brauchen werde. Sehr geschätzt, Mann!
So unglaublich hilfreich. Danke!
Ich habe mich gefragt, wie ich versehentlich das Momentum-Scrolling deaktiviert habe.
Danke! Bin so erleichtert, dass CSS das behebt!
Jedes Mal, wenn ich diesen Stil ausprobiere, verschwindet ein Teil des Inhalts auf einigen meiner Seiten – hatte jemand anderes dieses Problem? Die Elemente, die verschwinden, nehmen immer noch Platz ein (sie sind also nicht
display:none;). Ich kann den Inhalt sehen, wenn ich im Chrome-Inspektor nachsehe, und der gelbe Indikator zeigt auf die Stelle, wo mein Inhalt sein sollte, und er zeigt im Grunde auf diese unsichtbaren Divs, dieheight:0px;haben.Es sind definitiv diese "Momentum Scrolling"-Stile, die das verursachen. Ich habe nur versucht, diese Stile zu löschen, und mein Inhalt kommt zurück, verschwindet dann aber, wenn ich sie wieder hinzufüge.
Weil ich wollte, dass die ganze Seite Momentum-Scrolling hat, habe ich meine Stile so gemacht
Haben Sie Ideen, was ich falsch machen könnte? Jede Meinung ist sehr willkommen.
Ups – vergiss es! Habe versucht, den Stil stattdessen zu
htmlhinzuzufügen, es funktionierte wie erwartet. DuhJa, du hast es richtig Annie: Danke! Es funktioniert einwandfrei. :)
Hey! Ich saß neben dir bei der jQuery-Konferenz in San Diego! lol
Danke Annie! Ich habe mein Problem behoben! Habe -webkit-overflow-scrolling zuvor auf none geändert, um overflow auf hidden zu ändern, damit ich das Verschwinden verhindern kann :)
Danke, Kumpel!
Ich habe festgestellt, dass die Verwendung von
overflow-y: auto;(aus Chris' Beispiel) ebenfalls funktioniert. Getestet im nativen Browser und Chrome eines Samsung-Tablets mit Android 4.0.4 und auch auf einem iPad mit iOS 6, Safari + Chrome.overflow-y: auto; funktioniert bei mir in allen Browsern, aber nicht auf dem iPad. Ich verwende den folgenden Stil
.m-scrollable-filter {
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
Bitte gib mir eine Antwort.
Danke
Chris hat im Artikel gesagt, dass
overflow-yaufscrollgesetzt sein *muss*, damit-webkit-overflow-scrolling: touchfunktioniert. Verwenden Sie also stattdessen diesen Code (!importantist nicht nötig)Hat jemand dieses damit verbundene Problem und weiß, wie man es verhindert (oder was mache ich falsch)?…
Ich habe einen Div innerhalb eines Wrapper-Divs, der speziell vertikales Scrollen erlaubt, aber horizontales Scrollen verhindert. Alles ist in Ordnung, außer dass auf dem iPad immer noch das gesamte Div vertikal angehoben werden kann, das dann beim Loslassen zurückspringt. Was noch störender ist, ist, dass dies dann ermöglicht, dass dasselbe Div diagonal mit einem diagonalen Wischen "gezogen" werden kann. Hier ist die Seite im Entstehen…
http://raewilkinson.scratchthesky.com/
Ich habe dieses Problem mit JavaScript behoben, das das Standardverhalten von Scroll-Bounces in der vertikalen Achse verhindert. Es funktioniert, ist aber nicht ideal. Ich habe immer noch keine Einsicht, wie das gesamte Div in jede Richtung "ziehbar" werden kann.
Ich hatte den anderen Fall, bei dem der Inhalt vertikal scrollbar war. Ich hatte diesen Stil angewendet
Selbst wenn kein horizontales Scrollen benötigt wurde, verhielt es sich so, als würde horizontales Ziehen den Inhalt seitwärts bewegen und zurückspringen. Ich habe dies gelöst, indem ich
Dies bewirkt, dass Momentum nur in y-Richtung verwendet wird, da Momentum deaktiviert ist, wenn Overflow auf auto gesetzt wird.
Du kannst es auch andersherum einstellen:
overflow-y:auto, um Momentum nur in x-Richtung zu verwenden.Wenn ich das hinzufüge
overflow-y: scroll; /* muss scroll sein, nicht auto */zum html oder body, oder einem größeren Block meiner Website, erhalte ich keine Scroll-Verbesserungen und kann nicht auf die obere Leiste tippen, um nach oben zu scrollen. Irgendeine Idee warum?-webkit-overflow-scrolling: touch;
Sie müssen es nicht zu
htmloderbodyauf Ihren Webseiten hinzufügen; Apple verwendet standardmäßig Momentum-Scrolling für alle Seiten.-webkit-overflow-scrolling: touchist nur zum Scrollen anderer Elemente auf der Seite gedacht (nur zum Scrollen, sagen wir, einesp). Außerdem bietet Touch-Scrolling keine "Scroll-Verbesserungen" – es ermöglicht Ihnen nur, mit dem Finger schnell durch etwas Langes zu wischen.Vielen Dank dafür, genau das, was ich brauchte, um das Scroll-Problem auf iOS zu beheben.
Hallo – ich wollte mir nur einen Moment Zeit nehmen, um IHNEN dafür zu danken… So sehr es mir auch scheint, dass ich von der -webkit-Eigenschaft hätte wissen müssen, wenn ich das nicht gesehen hätte, wäre ich vielleicht einen dunklen Weg gegangen und hätte versucht, eine JavaScript-Ersetzung für overflow-y zu implementieren… DANKE AUFRICHTIG
Nur eine Warnung für Leute, die diese großartige Funktion finden – wenn Sie sie in einer Regel verwenden, die auch
overflow-x: hiddenenthält – Vorsicht. Da die-webkit-overflow-scrolling: touchEigenschaft dem Benutzer erlaubt, **vertikal und horizontal** zu scrollen, was versteckte Divs aufdecken kann, die links oder rechts versteckt sein sollen.Ich stehe vor genau diesem Problem. Ich verliere das vertikale Momentum-Scrolling, sobald ich
overflow-x: hiddenauf die html- und body-Tags anwende. Das Hinzufügen von-webkit-overflow-scrolling: touchstellt das vertikale Momentum-Scrolling wieder her, bricht aber meinoverflow-x: hidden. Gibt es eine Möglichkeit, beides zu vereinbaren? Ich habe versucht, die beiden Stile an verschiedenen Stellen zu platzieren, nur im html-Tag, nur im body-Tag, in einem Wrapper-Div, immer ohne Erfolg.Ich glaube, dass dies jetzt (August 2018) kein Problem mehr ist. Ich habe eine Website, die sich wie eine Vollbild-App verhält und
position: fixedfür Vollbild-Inhaltsblöcke verwendet, die ineinander übergehen, und einer davon hatoverflow-y: autofür wenn er überläuft. Ich habe die-webkit-overflow-scrolling: touchEigenschaft sowieoverflow-x: hiddenzu diesem Block hinzugefügt, und es scheint in Ordnung zu sein. Es hat definitiv das Scrollproblem behoben, das wir bei älteren iOS-Telefonen (iPhone 6) hatten, und wir bemerken keine anderen Nebenwirkungen (obwohl ich mir nicht sicher bin, ob ich überhaupt Inhalte habe, die links und rechts überlaufen). Ich möchte auch darauf hinweisen, dass dies sogar mitoverflow-y: autofunktioniert, obwohl das Codebeispiel in diesem Beitrag erwähnt, dass es nur bei Scroll funktioniert (vielleicht hat iOS diese Probleme jetzt, im Jahr 2018, gelöst).Weiß jemand, wie man einer horizontalen Scrollleiste eine Auto-Scrolling-Funktion hinzufügt??? Ich habe einige Bilder in einer Tabellenzeile und möchte, dass sich diese Zeile horizontal automatisch scrollt, aber nicht manuell..
Bitte helfe mir
Ich habe einen benutzerdefinierten Scroll mit CSS3, er funktioniert in allen Browsern gut, aber overflow-x ist auf dem iPhone nicht sichtbar. Hier ist der Code, den ich gemacht habe. http://codepen.io/anon/pen/aLwhq
funktioniert super auf dem iPad, danke für den Tipp.
Danke, das hat ein Problem behoben, das ich hatte, und jetzt sieht die iPhone-Seite so aus, wie sie sollte!
Okay, also wenn ich overflow-y: scroll; und -webkit-overflow-scrolling: touch; habe, funktioniert es in den meisten Fällen gut… außer bei dem DIV, das ich wirklich brauche.
Es ist ein festes DIV. Wenn ich die Seite im Querformat lade und genug Inhalt zum Überlaufen vorhanden ist, funktioniert es, aber wenn ich dann die Geräteausrichtung auf Hochformat ändere (wo der Inhalt nicht überlaufen muss) und dann zurück ins Querformat, scrollt das DIV überhaupt nicht mehr!
Bitte antworten Sie auf diesen Kommentar zum obigen Kommentar, damit ich Benachrichtigungen erhalte :P (Ich wünschte, es gäbe eine Möglichkeit, solche Präferenzen hier zu bearbeiten!)
Hallo Charles,
Ich habe auch dieses gleiche Problem, hast du eine Lösung dafür?
Das war ein toller Fund – funktionierte wie versprochen. Die einzige Nebenwirkung ist, dass Kindelemente mit position: fixed sich nun mit dem Scrolling des übergeordneten Elements bewegen, bis das Momentum stoppt, und dann schnappen sie zurück in ihre festen Positionen.
Hast du jemals eine Lösung dafür gefunden? Ich habe das gleiche Problem mit einem festen Navigationskopf-Div oben.
Ich habe ein ähnliches Problem. Festes Kindelement in einem Container, das " -webkit-overflow-scroll" hat, bewegt sich beim Scrollen, und zusätzlich ist es versteckt (ich glaube, das letztere Problem hängt mit der z-index-Änderung zusammen, wenn "webkit-overflow-scroll" angewendet wird).
Ich kann bestätigen, dass
overflow: auto;
-webkit-overflow-scrolling: touch;
Funktioniert, wenn du nicht immer Scrollbalken anzeigen möchtest. Danke für den Tipp, Chris!
Danke für den Tipp Chris;
overflow: auto;
-webkit-overflow-scrolling: touch;
funktioniert gut für die iPhone Media Query;
aber als ich es innerhalb der Media Query für iPad (1,2) verwendet habe, stürzte die iOS-App, die die Seite über einen iframe lud, ab.
Hello All,
Es funktioniert bei mir bestens. Aber ich habe ein weiteres Problem.
Beim Erstellen eines benutzerdefinierten Scrolls bekomme ich kein flüssiges Scrolling.
Habe ich etwas übersehen?
Hat meinen Tag gerettet! Aber warum ich das überhaupt hinzufügen müsste, ist mir unklar
Hat meine Woche gerettet!!!
Danke Chris, hat meinen Tag auch gerade gemacht!
Bündel von Dank!
Sehr geehrte, Ihre Technik funktioniert für mich. Ich hatte Probleme mit dem Scrollen auf Touch-Geräten, dann habe ich Ihren Code für "```
“`
jetzt scrollt meine Website reibungslos.
Wow, das war ein Lebensretter.
Warum zum Teufel würde man das Trägheits-Scrolling standardmäßig deaktivieren? Wer dachte sich "Dieser Entwickler will eindeutig, dass dieses Ding scrollbar ist, aber er will wahrscheinlich, dass es ruckelig ist, also machen wir das zur Standardeinstellung."?
warum overscroll scroll?
Danke dafür, hat mir gerade ein paar Stunden Arbeit erspart. Danke auch an die Schlüsselwörter, die mich hierher gebracht haben.
Verrückt, wie spezifisch einige der Steuerungen sein können.
Ich liebe es! Funktionierte, danke! :D
Ich liebe dich
Du hast mir gerade Stunden des Herumfummelns erspart. Wieder einmal. Danke!
Vielen Dank!
Mach weiter so mit dieser guten Arbeit, toller Artikel!
Worte können nicht ausdrücken, wie dankbar ich dafür bin. Danke!
Ich habe ein seltsames Problem. Ich habe überall gesucht und keine Antworten gefunden.
Ich verwende diese CSS-Eigenschaft (-webkit-overflow-scrolling) in einer iOS-App, die in einer Webansicht geladen wird.
Sobald ich die App öffne, stürzt sie ab und schließt sich wieder. Der Absturzbericht führte mich zu dieser Seite: http://bit.ly/1GobVK2, was darauf hindeutet, dass dies durch diese CSS-Eigenschaft verursacht wird. Ist das legitim? Sollte ich versuchen, dies auf Basis dieser Theorie zu beheben?
Hatte jemand ähnliche Probleme mit dieser CSS-Eigenschaft?
Hallo Chris,
Ich wollte nur sagen, es funktioniert tatsächlich *mit*
overflow: auto;, ich habe es auf mehreren Websites eingerichtet und es funktioniert.Vielen Dank für diesen Snippet – ich weiß nicht warum, aber ich vergesse immer wieder diese genaue Deklaration und komme jedes Mal zurück, wenn ich sie wieder brauche. ;)
Hallo Chris,
Das ist wirklich hilfreich. Ich hatte mit diesem Problem zu kämpfen und nachdem ich -webkit-overflow-scrolling: touch; angewendet hatte, bewegten sich alle Dinge reibungslos. Danke Mann dafür :)
Hallo, ich bin ein ziemlicher Technik-Laie, könntest du mir bitte helfen und es ganz einfach erklären, wie z.B. gehe zu Einstellungen, gehe zu x, dann x, usw. Mein iPhone 5s Bildschirm scrollt ständig und das macht mich wahnsinnig! Der Bildschirm ist sauber, das Gerät ist ein Jahr alt. Ich habe versucht, es aus- und wieder einzuschalten, hat nichts gebracht. Wie kann ich das beheben? Wenn es ein Speicherproblem ist, sollte ich dann einige Apps löschen? Danke! :-)
Ja, ich habe nicht gelesen, dass es nicht bei "auto" funktioniert und es dann versucht... Bei mir funktioniert es bei "auto" mit Cordova unter iOS, also hat sich das vielleicht geändert, nur zur Info.
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
Auf der Seite gibt es anscheinend eine Warnung, dass man '-webkit-overflow-scrolling' nicht auf Produktionsseiten verwenden soll.
Vielen Dank! Das hat perfekt funktioniert!!
Was für eine schöne Lösung, es hat perfekt funktioniert! Danke!
Hallo - wenn ich -webkit-overflow-scrolling auf einem div auf iOS 9+, Cordova-App verwende, aktiviert es das Scrollen nur bei 2-Finger-Ziehen. Irgendwelche Ideen für einen Workaround?
Ich weiß, dass dies ein alter Beitrag ist, aber...
"Webseiten auf iOS haben standardmäßig ein "Momentum"-Scrolling, bei dem ein Fingerwisch die Webseite zum Scrollen bringt und sie weiterläuft, bis sie schließlich langsamer wird und stoppt, als ob Reibung sie verlangsamt. So als ob man einen Hockeyschläger über das Eis schieben würde oder so."
...ich glaube, diese Aussage ist tatsächlich falsch. Nehmen Sie jede Webseite, einschließlich dieser hier, und scrollen Sie sie im mobilen Safari. Sie wird keine Trägheits-Scrolling haben. Das Scrollen stoppt fast sofort, wenn Sie den Finger wegziehen. Trägheits-Scrolling auf Seitenebene ist überhaupt nicht Standard.
Es sei denn natürlich, ich bin verrückt und bin die einzige Person, die diese Ergebnisse erzielt. Getestet auf iOS 7, 8 und 9, auf 3 Geräten.
Meine Erkenntnis ist, dass man webkit-overflow auf Dokumentenebene verwenden muss. Und da die meisten Websites das nicht tun, verpassen sie wirklich etwas.
Hat mir sehr geholfen. Ich bin vom Scrollen von Divs zum Scrollen der Seite übergegangen, also funktioniert es jetzt auf iOS. Hat von Anfang an auf Android perfekt funktioniert.
Ich liebe dich!! genau das, was ich brauchte. du hast meine App gerettet.
Es macht wirklich einen großen Unterschied, es zu aktivieren, da es wirklich kein Standard ist. Mehr Infos hier
https://ferdychristant.com/the-world-s-most-overlooked-web-optimization-for-ios-d88c7517d520#.r6pijsei7
Dieser Fix scheint nicht mehr zu funktionieren.
- Erlebt irgendjemand dasselbe Problem?
- Weiß irgendjemand, wie es jetzt behoben werden könnte?
Scheint auf meinem iPhone SE zu funktionieren, nur nicht auf meinem Desktop-Mac.
Gibt es eine Möglichkeit, Momentum-Scrolling funktionieren zu lassen und die Scrollleiste dauerhaft zu verstecken?
Ich habe versucht, ::-webkit-scrollbar usw. zu verwenden – es scheint, als wären sie nicht kompatibel mit
-webkit-overflow-scrolling: touch;
Weiß jemand, wie man die Top- und Bottom-Bar für das iPhone ausblenden kann? In iOS 9 ist das Standard, aber mit diesem Scrolling verschwindet der Standard...
Du hast mich wieder gerettet. Danke!
Versuch das, es funktioniert bei mir
if (window.location == window.parent.location && navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$(‘#orderpop’).attr(‘style’, ‘-webkit-overflow-scrolling: touch !important; overflow-y: scroll !important;’);
}
});
Was ist mit anderen Präfixen, -moz-, -khtml-, -o-, -ie-, oder ist das speziell für Safari? Muss das auch für Android gemacht werden? Welche anderen Präfixe wären für diese nötig?
Diese Demo und in meinem Projekt funktionieren auf iPad (MD329LL/a) mit 7.0.4 (11B554a) nicht
Vielen Dank dafür. Ich hatte so große Schwierigkeiten, selbst das Richtige zu finden, um das zu benennen, dass ich es fast aufgegeben hätte. Erstaunlich, wie wenig es tatsächlich in Dingen wie responsiven Menüs verwendet wird. Ich finde sogar bezahlte Plugins und dergleichen, die das nicht einmal verwenden.
Es funktioniert gut beim Scrollen, aber Lazy Loading hat aufgehört zu funktionieren. Nach dem Touchmove-Ereignis scrollt es immer noch und die Bilder können nicht geladen werden. Wie kann das behoben werden?
Dies *erfordert* nicht mehr, dass
overflow-yaufscrollgesetzt ist – es kann auf auto gesetzt werden und hat den gewünschten Effekt, sobald der Inhalt die Grenzen des Elements überschreitet und eine Scrollleiste verursacht.overflow-y: scroll; /* muss scroll sein, nicht auto */Ich kann mich irren, aber ich glaube nicht, dass das stimmt? Ich habe
overflow-y: autogesetzt und Momentum-Scrolling scheint unter iOS gut zu funktionieren.Manche Dinge sind einfach so einfach. Nach stundenlangem Debugging und Suchen habe ich diese einfache Lösung gefunden... und sie funktioniert sogar in Cordova/PhoneGap. Nächstes Mal besuche ich diese Seite zuerst. Danke.
CSS-Tricks 4TW!
Funktioniert perfekt, vielen Dank!
Das hat funktioniert und ist viel angenehmer, ABER der Container, der horizontal scrollte, hatte Elemente mit Hover-Zuständen, die beim Berühren auf iOS aktiviert wurden, jetzt reagieren sie nicht mehr auf Berührung, daher werde ich die Trägheits-Scroll wahrscheinlich abbrechen müssen, da die angezeigten Informationen beim Hovern wichtiger sind :(.
Ich möchte die gleiche Scroll-Funktion auf Android-Geräten.
Hier ein Postcss-Plugin https://npmjs.com/package/postcss-momentum-scrolling
Um die verstreuten Kommentare hier noch einmal zu wiederholen
DAS BRACHET DIE SCROLL-BENACHRICHTIGUNG
Ich schätze den Artikel, da er das Trägheits-Scrolling zurückgibt, aber einige Entwickler hier (Jessie, Nishant, Charles) haben angemerkt, dass sie keine Scroll-Ereignisse mehr erhalten, wenn dies aktiviert ist. Dies ist für unsere Anwendung wichtig. Wir erhalten ein Ereignis, wenn das Trägheits-Scrolling schließlich bei genau 0 stoppt, aber das hilft unseren Anwendungsfällen nicht. Wir brauchen Ereignisse, WÄHREND das Scrollen stattfindet, so wie wir es erhalten, wenn dies nicht vorhanden ist oder wie wir es bei anderen Produkten mit Trägheits-Scrolling erhalten. Jessie, danke für die setTimeout- und Track-Lösung. Ich werde es wahrscheinlich so simulieren, bis wir eine andere Antwort finden.
Dieser Fix scheint nicht mehr zu funktionieren.
- Erlebt irgendjemand dasselbe Problem?
- Weiß irgendjemand, wie es jetzt behoben werden könnte?
Laut diesem ist es nicht mehr nötig: https://ferdychristant.com/why-ios-11-is-great-news-for-the-web-345c43cc55db
Hallo,
Danke für diesen Tipp, es funktioniert wirklich gut! Aber ich habe ein Problem, die Scrollleiste erscheint, obwohl ich '::-webkit-scrollbar { display: none; }.' gesetzt habe.
Können Sie mir helfen, sie transparent zu machen oder sie anzupassen?
Danke
Hallo! Schöner Beitrag, danke!
Es gibt ein Problem, wenn die Animation auf der Seite verwendet wird. Der Inhalt beginnt beim Scrollen zu "tanzen". Ist das schon mal jemandem passiert, versucht, es zu beheben?
Großartig. Das war nützlich zu sehen. Wir verwenden dies in den Credits innerhalb unseres Spiels.
webkit-overflow-scrolling: auto funktioniert jetzt nicht mehr auf meinem iPad.
"webkit-overflow-scrolling" funktioniert in iOS 13 nicht mehr, da iOS 13 standardmäßig das Momentum-Scrolling in jedem scrollbaren Container aktiviert hat, ich aber dieses Verhalten nicht möchte. Hat jemand eine Idee, wie ich das Momentum-Scrolling auf meiner Webseite deaktivieren kann?