Artikel mit Schlagwort

Sie scrollen nach unten bis zu einem bestimmten Punkt und möchten nun Elemente auf eine bestimmte Weise stylen. Eine Kopfzeile wird fixiert. Eine Animation wird ausgelöst. Ein Inhaltsverzeichnis erscheint. Um etwas basierend auf der Scroll-Position zu tun, ist JavaScript erforderlich, richtig …

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;

…

Rik Schennink dokumentiert ein System, um CSS-Selektoren schreiben zu können, die eine Seite stylen, wenn sie an einen bestimmten Punkt gescrollt wurde. Wenn Sie wie ich sind, achten Sie bereits auf document.addEventListener('scroll' ... und haben Angst davor …

Jeder overflow-Wert außer visible und keine Höhe ist der Feind von Kindelementen mit position: sticky;. Es ist, als ob dieses Element bereit wäre, zu haften, wenn das Elternteil scrollt, aber es tut es nie, weil die Höhe unbegrenzt ist. …

CSS-Scroll-Snapping ermöglicht es Ihnen, den Viewport nach Beendigung des Scrollens an bestimmten Elementen oder Positionen zu sperren. Dies eignet sich hervorragend zum Erstellen von Interaktionen wie dieser:…

Ihr wisst, wie `position: relative` einen neuen Kontext für absolute Positionierung innerhalb eines Elements schafft? Nun, `position: sticky` ist eine lokal begrenzte Version von `position: fixed`. Schauen wir uns anhand eines Modals mit einer sticky schließenden Schaltfläche als Beispiel an, wie das funktioniert.

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, …