jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-tools

Gratis 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 laden...

Wat is CSS Scroll-State Query Generator?

Een scroll-state container query is een CSS-functie waarmee u elementen kunt stylen op basis van de scroll-status van een container. In plaats van JavaScript te gebruiken om de scrollpositie te detecteren en klassen te schakelen, schrijft u een @container scroll-state(...) query die automatisch stijlen toepast wanneer elementen zijn geklikt, vastzitten of wanneer een container scrollbaar is. Dit maakt scroll-gestuurde UI mogelijk zoals actieve carrouselindicatoren en sticky header-schaduwen zonder JavaScript.

Snel antwoord

Gebruik CSS scroll-state() queries binnen @container-regels om elementen te stylen op basis van scrollpositie zonder JavaScript. Richt op geklikte, vastzittende, scrollbare of overlopende toestanden. Vereist container-type: scroll-state en Chrome 135+. Voeg een JS-fallback toe voor cross-browser ondersteuning.

Last updated: 2026-05-28

Beperkingen

  • Scroll-state queries vereisen Chrome 135+ en worden nog niet ondersteund in Firefox of Safari. Zorg altijd voor een JavaScript-fallback voor productiegebruik.
  • De container moet container-type: scroll-state hebben ingesteld om scroll-state queries te laten werken. Dit is een apart container-type van size of inline-size queries.
  • Er is slechts een beperkt aantal scroll-statussen beschikbaar: snapped, stuck, scrollable en overflowing. Complexe scroll-gestuurde animaties vereisen nog steeds JavaScript of scroll-gestuurde animaties (@scroll-timeline).

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

Zo gebruik je deze tool

  1. Selecteer de scroll-status om op te richten: snapped (actief snap-item), stuck (sticky element) of scrollable (container met overflow).
  2. Stel de doel-CSS-selector en de scroll-container selector in.
  3. Kies de stijlwijziging om toe te passen wanneer de status actief is (dekking, schaal, rand, achtergrond).
  4. Kopieer de CSS, demo-HTML en optionele JavaScript-fallbacksnippet.

Waarvoor je het kunt gebruiken

  • Markeer het huidige geklikte carrouselitem met volledige dekking terwijl andere worden gedimd.
  • Voeg een schaduw toe aan een sticky header alleen wanneer deze aan de bovenkant van de viewport vastzit.
  • Style een scrollbaar paneel anders wanneer het overflow heeft versus wanneer alle inhoud past.

Gebruik

Praktische voorbeelden

Voorbeeld

Actieve carrouselindicator

Een carrousel toont productkaarten. Gebruik scroll-state(snapped: true) om volledige dekking en een randmarkering toe te passen op de huidige geklikte kaart terwijl andere kaarten worden gedimd. Geen JavaScript-scrollistener nodig.

Voorbeeld

Sticky header schaduw

Een pagina heeft een sticky header. Gebruik scroll-state(stuck: true) op de header om een box-shadow toe te voegen wanneer deze vast komt te zitten, wat aangeeft dat de gebruiker voorbij de bovenkant van de pagina heeft gescrolld.

Veelgemaakte fouten

  • scroll-state() gebruiken zonder container-type: scroll-state in te stellen op de scrollcontainer - de query heeft geen effect.
  • Verwachten dat scroll-state() werkt in alle browsers - het is een Chrome 135+ functie. Zorg altijd voor een JS-fallback.
  • Scroll-state queries gebruiken op elementen die nooit de doelstatus bereiken - verifieer dat het element daadwerkelijk kan worden geklikt of kan vastzitten in de lay-out.

Verificatie

  1. Scroll de container en verifieer dat de gestylde elementen correct worden bijgewerkt - geklikte items moeten de actieve stijl tonen, niet-geklikte items de standaard.
  2. Test met de JavaScript-fallback uitgeschakeld om te bevestigen dat de CSS-only benadering werkt in Chrome 135+.

FAQ

Vragen over CSS Scroll-State Query Generator

Welke statussen ondersteunt scroll-state()?

Momenteel ondersteund: snapped (element is het actieve scroll-snap-doel), stuck (sticky element zit vast aan een grens), scrollable (container heeft scrollbare overflow) en overflowing (inhoud overstroomt de container). Deze statussen worden opgevraagd binnen @container scroll-state(...) regels.

Hoe verschilt scroll-state() van JavaScript scroll-evenementen?

Scroll-state queries worden uitgevoerd op de compositor-thread, niet de main JavaScript-thread. Ze zijn beter presterend en veroorzaken geen jank. JavaScript scroll-evenementen worden geactiveerd op de main-thread en kunnen lay-out thrashing veroorzaken als ze niet worden gedebounced. Voor eenvoudige visuele statuswijzigingen zijn scroll-state queries de betere keuze.

Gerelateerde tools

Meer 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.

Open tool

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool