CSS Scrollbar avec le compteur de progrès

La barre de défilement elle-même est un indicateur de progrès naturel. La position de la barre de défilement reflète directement la progression de défilement de l'élément de défilement (généralement la page entière). Mais cela ressemble plus à un indicateur de progression qu'une barre de progression "remplissable".

Nous pouvons utiliser certaines techniques CSS pour faire en sorte que la barre de défilement "remplisse" lors du défilement.

Mais cela ne s'applique qu'aux propriétés de style Scrollbar avec -webkit- Prefix. En d'autres termes, ces attributs ne sont pas standard. Les propriétés standardisées de style barre de défilement sont scrollbar-width et scrollbar-color , qui ne peuvent pas réaliser cet effet, mais peuvent être plus sûres à long terme. Pourtant, la version avec le préfixe du fournisseur peut ne pas disparaître, donc si vous pensez que c'est une étrange forme d'amélioration progressive, cela peut être OK non plus.

Quelles sont les compétences?

Essentiellement, cela se fait en ajoutant un énorme box-shadow au haut du curseur de la barre de défilement (ou sur le côté de l'élément de défilement horizontal).

 :racine {
  --Shadow: # 43A047;
  --CrollBarbg: #eee;
  - Thumbbg: # 66BB6A;
}
:: - webkit-scrollbar {
  Largeur: 16px;
}
:: - Webkit-Scrollbar-Track {
  Contexte: var (- ScrollBarbg);
}
:: - webkit-scrollbar-thumb {
  Color d'arrière-plan: var (- thumbbg);
  Box-Shadow: 0 -100VH 0 100VH var (- ombre), 0 0 15px 5px noir;
}

Démo

La première fois que j'ai vu, c'était dans un stylo à Myk.

Cet exemple ne distingue pas du tout la partie curseur de la barre de défilement, ce qui le fait plus comme une barre de progrès, mais aussi plus difficile à utiliser. Ma démo utilise un curseur de couleurs légèrement différent.

Puis-je vraiment l'utiliser?

ne peut pas! En dehors de son très étrange et non standard. Le navigateur Safari se bloque et je ne sais pas comment le réparer.

J'ai cependant une astuce CSS très pertinente.

Je veux en savoir plus sur les styles de barre de défilement

Ok, s'il vous plaît voir ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!