Hallo, wir sind zurück mit wöchentlichen Updates über die Browserlandschaft von Šime Vidas.
Im dieswöchigen Update kann die CSS-:not-Pseudoklasse komplexe Selektoren akzeptieren, wie man sanftes Scrollen deaktiviert, wenn man „Auf Seite suchen…“ in Chrome verwendet, Safaris …
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 drücken oder
Nehmen wir an, Sie möchten eine Webseite von oben nach unten *programmgesteuert* scrollen. Zum Beispiel, wenn Sie einen Screencast aufnehmen und einen schönen Vollseiten-Scroll wünschen. Sie können ihn wahrscheinlich nicht selbst scrollen, da er ungleichmäßig und ruckelig wäre. ...
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;
Die CSS-Eigenschaft scroll-behavior ermöglicht es uns zu definieren, ob die Scroll-Position des Browsers zu einer neuen Position springt oder den Übergang sanft animiert, wenn ein Benutzer auf einen Link klickt, der auf eine verankerte Position innerhalb eines Scrollbereichs zielt …
Smooth Scrolling (die animierte Positionsänderung innerhalb des Ansichtsfensters vom Ursprungslink zum Zielanker) kann ein nettes Interaktionsdetail sein, das einer Website hinzugefügt wird und dem Erlebnis ein poliertes Gefühl verleiht. Wenn Sie mir nicht glauben, …
Hey! Bevor du dich zu tief in das Kaninchenloch des JavaScript-basierten Smooth Scrolling begibst, solltest du wissen, dass es dafür eine native CSS-Funktion gibt: scroll-behavior.
html {
scroll-behavior: smooth;
}Und bevor Sie zu einer Bibliothek wie jQuery greifen …