Smooth scrolling ist viel einfacher geworden. Wenn Sie es die ganze Zeit auf Ihrer Seite wünschen und zufrieden sind, wenn der Browser die Dauer für Sie regelt, ist es eine einzige Zeile CSS
html {
scroll-behavior: smooth;
}Ich habe das in Version 17 dieser Seite ausprobiert, und es war das zweitbeliebteste Ding, abgesehen von der wuchtigen Scrollleiste. Ich habe die Scrollleiste nicht geändert. Ich mag sie. Ich bin ein großer Nutzer von Scrollleisten und mache sie durch die wuchtige Darstellung noch benutzerfreundlicher, und das benutzerdefinierte Styling macht einfach Spaß. Aber ich bin zum Nicht-sanften-Scrollen zurückgekehrt.
Wie Šime Vidas in Web Platform News darauf hingewiesen hat, hat auch Wikipedia sanftes Scrollen ausprobiert.
Das aktuelle Design für verschobene Absätze in mobilen Diffs erforderte eine animierte Scrollbewegung, wenn von einer Instanz des fraglichen Absatzes zu einer anderen geklickt wurde. Der Zweck dieser Animation ist es, dem Benutzer zu helfen, sich zu orientieren, wohin der Absatz verschoben wurde.
Wir dachten zunächst, dass dieses Verhalten generell für Minerva von Vorteil wäre (z. B. wäre es großartig, wenn man den Inhaltsbereich zum Navigieren zu einem Seitenabschnitt animiert scrollen würde), aber nach dem Ausprobieren entschieden wir uns vorerst, diese Änderung nur auf die mobile Diff-Ansicht zu beschränken.
Ich kann verstehen, dass die Unfähigkeit, die Zeitsteuerung anzupassen, ein Nachteil ist, aber das war nicht der Grund, warum ich das sanfte Scrollen aufgegeben habe. Was eine Menge Leute frustriert zu haben schien, war die seiteninterne Suche. Es ist eine Sache, auf einen Link zu klicken und zu einer Überschrift gezoomt zu werden (das fühlt sich irgendwie gut an), aber es ist etwas anderes, wenn man schnell durch Übereinstimmungen springen möchte, wenn man auf der Seite eine Suche durchführt. Die Leute fanden das Scrollen zwischen den Treffern langsam und frustrierend. Dem stimmte ich zu.
Überraschenderweise hat selbst die JavaScript-Variante des sanften Scrollens…
document.querySelector('.hello').scrollIntoView({
behavior: 'smooth'
});…keine Möglichkeit, die Zeitsteuerung anzupassen. Noch gibt es eine zuverlässige Möglichkeit zu erkennen, ob die Seite aktiv durchsucht wird, um UX-Änderungen vorzunehmen, wie z. B. das Deaktivieren des sanften Scrollens.
Der vielleicht größte Nachteil des sanften Scrollens ist das Potenzial, den Fokus falsch zu verwalten. Das Scrollen zu einem Element in JavaScript ist in Ordnung, solange man den Fokus fast dorthin bewegt, wohin man scrollt. Heather Migliorisi behandelt das hier im Detail.
Firefox (zumindest unter Linux) „deaktiviert“ das sanfte Scrollen automatisch, wenn die seiteninterne Suche verwendet wird.
Ich habe es gerade auf macOS ausprobiert und es scheint auch dort zuzutreffen. Gute Arbeit, Firefox! Ich denke, das ist ein wünschenswertes UX.
Haben Sie bemerkt, wo Sie überall `scroll-behavior` nicht verwenden können?
https://caniuse.com/#search=scroll-behavior
Ich habe zwei Definitionen für „sanftes Scrollen“ gesehen. Eine, die sanftes automatisches Scrollen bei Klick auf Links ist, da sehe ich, warum das ärgerlich sein könnte, aber solange es nur auf Links auf der Seite ist, ist es relativ harmlos.
Leider haben viele Websites JavaScript verwendet, um das Scrollradverhalten des Benutzers zu überschreiben, und das ist eine ganz andere Problematik, die oft denselben Namen trägt. Es mag in einer Demonstration gut aussehen, aber für Endbenutzer ist es ein Albtraum in Bezug auf die Benutzerfreundlichkeit, da die Scrollradoperationen langsamer und weniger präzise werden.
Im Allgemeinen halte ich es für eine schlechte Idee, mit Eingabegeräten zu spielen. Die Leute haben bestimmte Erwartungen daran, wie sie mit einer Website interagieren können, basierend auf ihren eigenen Erfahrungen und ihrer Maus-/Browserkonfiguration. Und wann immer man einem Benutzer sagt, dass man besser weiß, wie er seinen Computer benutzen soll, riskiert man, diesen Benutzer zu vergraulen.
Ich denke, letzteres ist eher als „Scroll Jacking“ bekannt, richtig?
Das ist ziemlich interessant, da ich nie erraten hätte, dass auch die Suchfunktion/Suche animiert. Ich habe das Gefühl, das ist ein Versehen des Browsers, da die Verwendung einer integrierten Browserfunktion wie dieser unabhängig vom Code einer Website sein sollte.
Laut den Spezifikationen wird die Dauer des sanften Scrollens vom User Agent verwaltet, was meiner Meinung nach Sinn ergibt. Soweit ich weiß, wird dies in den meisten Browsern über ein Flag in about:config oder so konfiguriert ... Benutzer könnten es sogar auf 0 setzen, um es vollständig zu deaktivieren. Ich denke, das ist absolut der richtige Weg, auch wenn Browser diese Konfigurationsoption in Zukunft bekannter machen sollten...
Ich bevorzuge es auch, Scrollleisten immer sichtbar zu haben, aber ich muss widersprechen, wenn man eine große, grelle, orange-pinke Scrollleiste erzwingt, wenn der Benutzer über seine Betriebssystemeinstellungen explizit gewählt hat, Scrollleisten auszublenden. Ich denke, wenn ein Benutzer eine Wahl hat und seine Wahl klar getroffen hat, sollten wir unser Bestes tun, sie zu honorieren.
Hinweis: Firefox scheint die Wahl des Benutzers unabhängig von CSS zu berücksichtigen, also Hut ab vor ihnen.
Ich bin hier wahrscheinlich nicht auf dem Laufenden, aber warum haben die Leute sanftes Scrollen so sehr gehasst/gehasst? In den meisten Anwendungsfällen, wie diesem, scheint es eine wirklich gute und nützliche Sache zu sein.
Ich verpasse hier wohl etwas, oder? Warum es so gehasst wurde?
Schauen Sie sich an, was ich im obigen Beitrag geschrieben habe – es hatte mit der geänderten „Seite suchen“-Funktion (in Chrome) zu tun.
Sollte der Titel des Artikels also lauten: „Nachteile des sanften Scrollens, wenn es auf die ganze Seite angewendet wird“? Für einzelne Ankerlinks, die zu einem anderen Abschnitt führen, sehe ich keinen Nachteil. Leute, die diese Art von Übergängen nicht mögen oder gar keine Animationen bevorzugen, können dieses Verhalten browserweit deaktivieren (wie ich in meinem ersten Kommentar hier geschrieben habe).
Wie ist die Browserunterstützung für diese Funktion? Was ist Ihr Maßstab für die Browserunterstützung bei der Implementierung einer neuen Funktion?
Persönlich ... ich benutze Chromium, mit aktivierten Overlay-Scrollleisten. Ich benutze einen Flinger (kostengünstiges Wacom One-Tablet mit 2 Tasten) oft und nutze sanftes Scrollen intensiv.
Wenn wir eine ` :root:searching` Pseudo-Klasse und vielleicht ein `:root::searchbar` Pseudo-Element hätten, das eingeschränkte Styling (vielleicht) hätte, wäre das nützlich.
Ähnlich mit Events. Eine Reihe von `search`-Events, die einen asynchronen Iterator von DOM-Knoten erwarten, wäre nützlich. Zum Beispiel `searchopen`, `searchbegin`, `searchterminate`, `searchrestart` und so weiter. Man würde mit einem Dokument-Iterator von Textknoten beginnen ... schätze ich.
Wäre aber nützlicher bei unendlichen Scroller.
Es scheint also, dass die Antwort auf Ihr Problem darin besteht, dass Sie das sanfte Scrollen nur vorübergehend aktivieren möchten, wenn ein Benutzer einen Ankerlink klickt.
Wenn der Benutzer auf den Link klickt, aktivieren Sie das sanfte Scrollen. Der Browser sollte sanft scrollen. Eine Sekunde, nachdem der Benutzer auf den Link geklickt hat, deaktivieren Sie das sanfte Scrollen.
Das Endergebnis ist, dass Sie das sanfte Link-Scrollen erhalten, das die Leute mögen, wenn sie auf Links klicken. Bei Verwendung von Strg + F ist das sanfte Scrollen deaktiviert.
Ich mag die wuchtige Scrollleiste, sie ist auffällig und einfach zu bedienen. Ich mag nur nicht, dass sie einen geprägten Effekt hat, der nirgendwo sonst im Redesign zu finden ist.
Das Schlimmste von allem ist, wenn es von JavaScript verwaltet wird (Scroll Jacking, wie Sie es erwähnt haben), es ist immer ruckelig und auf Mobilgeräten fast unbrauchbar.
Aber wenn die native Methode über JavaScript ausgelöst wird, wie
passiert das nur bei den ausgewählten Links, daher gibt es meiner Meinung nach keinen Nachteil.
Nebenbemerkung: Warum auch immer man die CSS-Eigenschaft für sanftes Scrollen überhaupt auf die GANZE Seite setzen wollen würde?!?
Auf meiner eigenen Website verwende ich sanftes Scrollen in der JS-Variante, aber NUR für bestimmte Links. Es wird also nur ausgelöst, wenn man auf Links in der Navigation und dem Hauptcontainer klickt, WENN diese auf interne Anker verlinken. Was automatisch die seiteninterne Suche usw. ausschließt. Aber na ja ... gib den Leuten ein Werkzeug, und sie werden es missbrauchen ... *rollt mit den Augen*
cu, w0lf.