Maison > interface Web > tutoriel CSS > Comment modifier le style de barre de défilement par défaut avec CSS

Comment modifier le style de barre de défilement par défaut avec CSS

王林
Libérer: 2020-03-17 10:58:08
avant
2396 Les gens l'ont consulté

Comment modifier le style de barre de défilement par défaut avec CSS

Avant-propos :

De nombreux projets doivent modifier le style par défaut des barres de défilement et ne souhaitent pas télécharger et introduire des plug-ins séparément.

Méthode de modification : (Tutoriel recommandé : Tutoriel d'introduction CSS)

            &::-webkit-scrollbar {
              // 滚动条的背景
              width: 16px;
              background: #191a37;
              height: 14px;
            }

            &::-webkit-scrollbar-track,
            &::-webkit-scrollbar-thumb {
              border-radius: 999px;
              width: 20px;
              border: 5px solid transparent;
            }

            &::-webkit-scrollbar-track {
              box-shadow: 1px 1px 5px #191a37 inset;
            }

            &::-webkit-scrollbar-thumb {
              //滚动条的滑块样式修改
              width: 20px;
              min-height: 20px;
              background-clip: content-box;
              box-shadow: 0 0 0 5px #464f70 inset;
            }

            &::-webkit-scrollbar-corner {
              background: #191a37;
            }
Copier après la connexion

Code simplifié :

            &::-webkit-scrollbar {
              width: 6px;
              height: 6px;
              background: transparent;
            }

            &::-webkit-scrollbar-thumb {
              background: transparent;
              border-radius: 4px;
            }

            &:hover::-webkit-scrollbar-thumb {
              background: hsla(0, 0%, 53%, 0.4);
            }

            &:hover::-webkit-scrollbar-track {
              background: hsla(0, 0%, 53%, 0.1);
            }
Copier après la connexion

L'avantage de ceci est qu'il ne sera affiché lorsque la souris est déplacée sur les barres de défilement modifiées.

Masquer le code de la barre de défilement d'un certain axe :

overflow-x:hidden;
Copier après la connexion

Partage de didacticiels vidéo associés : tutoriel vidéo CSS

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!

Étiquettes associées:
source:jb51.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal