Als wir das v17-Design (wir sind jetzt bei v18) dieser Seite veröffentlichten. Ich fügte html { scroll-behavior: smooth; } zum CSS hinzu. Sofort erhielt ich Kommentare wie diesen (nur ein Beispiel)
… wenn Sie Strg+F oder Befehl+F drücken und auf CSS-Tricks suchen, scrollt die Seite sehr langsam, anstatt zum Ergebnis zu springen, was das Finden von Informationen und Schlüsselwörtern auf CSS-Tricks erheblich verlangsamt. Da ich diese Verknüpfung häufig verwende, ist dies für mich ein Usability-Problem.
Nicht lange danach habe ich es einfach entfernt. Ich habe nicht so stark dazu gestanden, und die Tatsache, dass man kaum Kontrolle darüber hat, hat mich dazu gebracht, die Idee fallen zu lassen.
Ich sehe, dass es oft als "CSS-Tipp" genannt wird, also habe ich meine Erfahrung eingebracht
Nachdem ich das erwähnt hatte, meldete sich Christian Schaefer mit einer großartigen Idee
Das gefällt mir sehr!
Christian hat darüber gebloggt
Sanftes Scrollen wird konsequenterweise auf alles angewendet. Immer. Selbst beim Durchlaufen der Seitensuchergebnisse des Browsers. Zumindest ist das bei Chromium der Fall. Für die Seitensuche wäre es also wünschenswert, wenn der Browser eine Ausnahme von dieser Regel machen und das sanfte Scrollen deaktivieren würde. Bis das Chromium-Team es behebt, hier ein Trick, wie Sie das Problem mit etwas zusätzlichem CSS und HTML selbst lösen können.
Ich bin mir nicht sicher, ob Chrome (oder ein anderer Browser) dies als Fehler betrachten würde oder nicht. Ich bezweifle, dass es spezifiziert ist, da "Seite suchen" keine wirkliche Webtechnologiefunktion ist. Aber trotzdem, ich bevorzuge "Seite suchen" ohne dieses Feature.
html:focus-within {
scroll-behavior: smooth;
}Es funktioniert meistens. Der nachteilige Teil daran sind Situationen wie diese…
<a href="#link-down-the-page">Jump down</a>
...
<h2 id="link-down-the-page">Header</h2>Das springt die Seite nach unten. Mit scroll-behavior: smooth; ist das irgendwie nett. Aber <h2> ist typischerweise kein "fokussierbares" Element. Also, mit dem obigen Trick gibt es jetzt keinen Fokus mehr innerhalb von <html>, und das sanfte Scrollen geht verloren. Wenn Sie das beibehalten wollen, müssten Sie
<h2 tabindex="-1" id="link-down-the-page">Header</h2>
Ich glaube nicht, dass wir am Scroll-Verhalten herumspielen sollten. Manche sind empfindlich gegenüber diesem sanften Scrollen und brauchen diese "Schritte".
Ich schätze aber Ihre Teilung! Teile nur oben. Kluge Lösung!
Mir ist gerade eingefallen, dass wir unseren "Smooth Scrolling" Snippet aktualisiert haben, um sicherzustellen, dass alle Header, zu denen gescrollt wird, auch fokussierbar sind
War irgendwie "kontrovers", als wir es gemacht haben, wegen der etwas unerwarteten visuellen Fokusstile.
Sollte eigentlich nicht kontrovers sein. Wenn man zu einem Ankerlink springt, sollten die Fokuspunkte verschoben werden, damit es auch für Tastaturnutzer funktioniert.
Fügen Sie immer `tabindex="-1"` zu nicht-interaktiven Elementen hinzu, auf die verlinkt wird oder die programmgesteuert den Fokus erhalten.
Ich empfehle dringend, diesen `tabindex` einfach zum `body` hinzuzufügen. Es ermöglicht auch CSS-Fokusziele, die gut mit dem Tippen auf alles andere im `body` auf Mobilgeräten funktionieren.
Vergessen Sie nicht, es für Leute zu deaktivieren, die reduzierte Bewegung bevorzugen :)
Interessant. Firefox hat dieses Problem nicht.
Sanftes Scrollen ist für viele Benutzer hilfreich. Besonders ältere Benutzer sind verwirrt, wenn der Bildschirm einfach springt.
Dies verursacht ein Problem mit `select`-Elementen, die Firefox unter macOS verwenden. Sie müssen doppelt auf das Element klicken, um die Optionen anzuzeigen.