Qu'est-ce que CSS Scroll-State Query Generator ?
Une requete de conteneur scroll-state est une fonctionnalite CSS qui permet de styliser les elements en fonction de l'etat de defilement d'un conteneur. Au lieu d'utiliser JavaScript pour detecter la position de defilement et basculer des classes, vous ecrivez une requete @container scroll-state(...) qui applique automatiquement les styles lorsque les elements sont accroches (snapped), bloques (stuck) ou lorsqu'un conteneur est defilable.
Réponse rapide
Utilisez les requetes CSS scroll-state() dans les regles @container pour styliser les elements en fonction de la position de defilement sans JavaScript. Ciblez les etats snapped, stuck, scrollable ou overflowing. Necessite container-type: scroll-state et Chrome 135+.
Last updated: 2026-05-28
Limites
- Les requetes scroll-state nécessitent Chrome 135+ et ne sont pas encore supportees dans Firefox ou Safari. Fournissez toujours un repli JavaScript.
- Le conteneur doit avoir container-type: scroll-state defini pour que les requetes scroll-state fonctionnent.
- Seul un ensemble limite d'etats de defilement est disponible : snapped, stuck, scrollable et overflowing.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Comment utiliser cet outil
- Selectionnez l'etat de defilement a cibler : snapped (element de snap actif), stuck (element sticky) ou scrollable (conteneur avec overflow).
- Definissez le selecteur CSS cible et le selecteur du conteneur de defilement.
- Choisissez le changement de style a appliquer lorsque l'etat est actif.
- Copiez le CSS, le HTML de demonstration et l'extrait de repli JavaScript optionnel.
A quoi il sert
- Mettre en surbrillance l'element de carrousel actuellement accroche avec une opacite complete tout en diminuant les autres.
- Ajouter une ombre a un en-tete sticky seulement lorsqu'il est bloque en haut du viewport.
- Styliser un panneau defilable differemment quand il a un overflow vs quand tout le contenu tient.