jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS Scroll-State Query Generator

Generate CSS scroll-state() container queries for styling snapped, stuck, or scrollable elements. Includes JavaScript fallback for cross-browser support.

Tool wird geladen...

Was ist CSS Scroll-State Query Generator?

Eine Scroll-State-Container-Query ist eine CSS-Funktion, mit der Sie Elemente basierend auf dem Scroll-Zustand eines Containers gestalten können, ohne JavaScript. Statt JavaScript zur Erkennung der Scroll-Position und zum Umschalten von Klassen zu verwenden, schreiben Sie eine @container scroll-state(...)-Query, die automatisch Styles anwendet, wenn Elemente eingerastet, fixiert oder wenn ein Container scrollbar ist. Dies ermöglicht scrollgesteuerte UI wie aktive Carousel-Indikatoren und Sticky-Header-Schatten ohne JavaScript.

Kurze Antwort

Verwenden Sie CSS-scroll-state()-Queries innerhalb von @container-Regeln, um Elemente basierend auf der Scroll-Position ohne JavaScript zu gestalten. Zielen Sie auf snapped, stuck, scrollable oder overflowing Zustände ab. Erfordert container-type: scroll-state und Chrome 135+. Fügen Sie einen JS-Fallback für browserübergreifende Unterstützung ein.

Last updated: 2026-05-28

Einschränkungen

  • Scroll-State-Queries erfordern Chrome 135+ und werden noch nicht in Firefox oder Safari unterstützt. Stellen Sie für den Produktionseinsatz immer einen JavaScript-Fallback bereit.
  • Der Container muss container-type: scroll-state gesetzt haben, damit Scroll-State-Queries funktionieren. Dies ist ein separater container-type von size- oder inline-size-Queries.
  • Nur eine begrenzte Anzahl von Scroll-Zuständen ist verfügbar: snapped, stuck, scrollable und overflowing. Komplexe scrollgesteuerte Animationen erfordern weiterhin JavaScript oder scrollgesteuerte Animationen (@scroll-timeline).

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie den anzuvisierenden Scroll-Zustand: snapped (aktives Snap-Element), stuck (fixiertes Element) oder scrollable (Container mit Überlauf).
  2. Legen Sie den CSS-Zielselektor und den Scroll-Container-Selektor fest.
  3. Wählen Sie die Stil-änderung, die angewendet werden soll, wenn der Zustand aktiv ist (Deckkraft, Skalierung, Rahmen, Hintergrund).
  4. Kopieren Sie das CSS, das Demo-HTML und das optionale JavaScript-Fallback-Snippet.

Wofür du es nutzen kannst

  • Das aktuell eingerastete Carousel-Element mit voller Deckkraft hervorheben, während andere abgedunkelt werden.
  • Einen Sticky-Header nur dann mit einem Schatten versehen, wenn er am oberen Viewport-Rand fixiert ist.
  • Ein scrollbares Panel anders gestalten, wenn es Überlauf hat, im Vergleich zu wenn der gesamte Inhalt passt.

Anwendungsfalle

Praxisbeispiele

Beispiel

Aktiver Carousel-Indikator

Ein Carousel zeigt Produktkarten. Verwenden Sie scroll-state(snapped: true), um volle Deckkraft und eine Rahmenhervorhebung auf die aktuell eingerastete Karte anzuwenden, während andere Karten abgedunkelt werden. Kein JavaScript-Scroll-Listener erforderlich.

Beispiel

Sticky-Header-Schatten

Eine Seite hat einen Sticky-Header. Verwenden Sie scroll-state(stuck: true) auf dem Header, um einen box-shadow hinzuzufügen, wenn er fixiert ist, was anzeigt, dass der Benutzer über den Seitenanfang hinaus gescrollt hat.

Haufige Fehler

  • scroll-state() verwenden, ohne container-type: scroll-state auf dem Scroll-Container zu setzen —die Query hat keine Wirkung.
  • Erwarten, dass scroll-state() in allen Browsern funktioniert —es ist eine Chrome 135+-Funktion. Stellen Sie immer einen JS-Fallback bereit.
  • Scroll-State-Queries auf Elementen verwenden, die den Zielzustand nie erreichen —überprüfen Sie, ob das Element im Layout tatsächlich eingerastet oder fixiert werden kann.

Überprüfung

  1. Scrollen Sie den Container und überprüfen Sie, ob die gestalteten Elemente korrekt aktualisiert werden —eingerastete Elemente sollten den aktiven Stil zeigen, nicht eingerastete den Standardstil.
  2. Testen Sie mit deaktiviertem JavaScript-Fallback, um zu bestätigen, dass der reine CSS-Ansatz in Chrome 135+ funktioniert.

FAQ

Fragen zu CSS Scroll-State Query Generator

Welche Zustände unterstützt scroll-state()?

Derzeit unterstützt: snapped (Element ist das aktive Scroll-Snap-Ziel), stuck (Sticky-Element ist an einer Grenze fixiert), scrollable (Container hat scrollbaren Überlauf) und overflowing (Inhalt überläuft den Container). Diese Zustände werden innerhalb von @container scroll-state(...)-Regeln abgefragt.

Wie unterscheidet sich scroll-state() von JavaScript-Scroll-Events?

Scroll-State-Queries werden auf dem Compositor-Thread ausgeführt, nicht auf dem Haupt-JavaScript-Thread. Sie sind leistungsfähiger und verursachen kein Ruckeln. JavaScript-Scroll-Events feuern auf dem Haupt-Thread und können bei fehlender Entprellung zu Layout-Thrashing führen. Für einfache visuelle Zustandsänderungen sind Scroll-State-Queries die bessere Wahl.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren