Exemple détaillé du style de barre de défilement personnalisé CSS3

Dans l'article précédent, nous vous avons présenté le paramètre CSS du style de barre de défilement div Nous savons tous que lorsque le contenu dépasse le conteneur, une barre de défilement apparaîtra dans le conteneur, et la sienne Parfois, la barre de défilement ne peut pas répondre à nos exigences esthétiques, nous pouvons donc personnaliser la barre de défilement via la pseudo-classe CSS .

Nous devons d’abord comprendre les barres de défilement. La barre de défilement est composée de deux parties d'apparence : 1. La partie coulissante, nous l'appelons le curseur 2. La piste de la barre de défilement, c'est-à-dire la piste du curseur. est plus foncé que la couleur de la piste.

Le style CSS de la barre de défilement se compose principalement de trois parties :

1. ::-webkit-scrollbar Définit le style général de la barre de défilement ;

2. ::-webkit -scrollbar-thumb Partie curseur ;

3. ::-webkit-scrollbar-thumb Partie de suivi

Prenez overflow-y:auto ; un exemple ( overflow-x:Identique à auto)

code html :

<p class="test test-1">
		<p class="scrollbar"></p>
</p>

code css :

    .test{
    	width: 50px;
    	height: 200px;
    	overflow: auto;
    	float: left;
    	margin: 5px;
    	border: none;
    }
    .scrollbar{
    	width: 30px;
    	height: 300px;
    	margin: 0 auto;

    }
    .test-1::-webkit-scrollbar {/*滚动条整体样式*/
            width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
    .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
             -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #535353;
        }
    .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 10px;
            background: #EDEDED;
        }

L'effet est comme suit :

Si vous souhaitez modifier la largeur de la barre de défilement : changez-la simplement dans ::-webkit-scrollbar si vous souhaitez modifier les coins arrondis de ; le curseur de la barre de défilement, allez dans ::-webkit-scrollbar Change in -thumb; si vous souhaitez modifier les coins arrondis de la piste, changez-le dans ::-webkit-scrollbar-track

De plus , le curseur de la barre de défilement peut être rempli non seulement de couleur mais aussi d'images comme suit :

code css :

    .test-5::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .test-5::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
    background-color: #F90;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
        }
    .test-5::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            /*border-radius: 10px;*/
            background: #EDEDED;
        }

code html :

	<p class="test test-5">
		<p class="scrollbar"></p>
	</p>

L'effet est le suivant :

Résumé :

En apprenant des exemples ci-dessus, je Je crois que les amis peuvent créer leurs propres barres de défilement. S'il y a plusieurs barres de défilement dans le document, j'espère que tout le style de la barre de défilement est le même, il n'est donc pas nécessaire d'ajouter quoi que ce soit comme la classe, l'identifiant, le nom de l'étiquette, etc. devant le pseudo élément.

Recommandations associées :

Exemple de définition CSS du style de barre de défilement div

Comment résoudre le problème du style de la barre de défilement

Exemples de conception de style de barre de défilement div en HTML

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!