Exemple de code CSS pour définir le style de la barre de défilement

Cet article présente principalement l'exemple de code du style de barre de défilement de réglage CSS. Il est très bon et a une certaine valeur de référence. Les amis qui en ont besoin peuvent s'y référer

Le code d'implémentation du style de barre de défilement de réglage CSS. est le suivant Affichage :

•::-webkit-scrollbar Toute la partie de la barre de défilement
•::-webkit-scrollbar-thumb Le petit carré à l'intérieur de la barre de défilement peut se déplacer de haut en bas ( ou gauche et droite), selon qu'il s'agit d'une barre de défilement verticale ou d'une barre de défilement horizontale)
•::-webkit-scrollbar-track La trace de la barre de défilement (avec le pouce à l'intérieur)
•:: -webkit-scrollbar-button Le tracé de la barre de défilement Des boutons aux deux extrémités permettent d'affiner la position des petits carrés en cliquant dessus.
•::-webkit-scrollbar-track-piece La piste intérieure, la partie médiane de la barre de défilement (supprimée)
•::-webkit-scrollbar-corner Le coin, c'est-à-dire l'intersection du deux barres de défilement
•::-webkit-resizer Un petit contrôle à l'intersection de deux barres de défilement pour redimensionner les éléments en les faisant glisser

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width: 16px;
    height: 16px;
    background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

Paramètres détaillés

Définir des barres de défilement, c'est utiliser des pseudo-éléments et des pseudo-classes Alors que sont les pseudo-éléments et les pseudo-classes ?

Tout le monde devrait être familier avec les pseudo-classes : link, :focus, :hover De plus, de nombreux sélecteurs de pseudo-classes ont été ajoutés à CSS3, tels que :nth-child, :last-child, :ntième-dernier-de-type() etc.

Vous avez déjà vu les pseudo-éléments en CSS : :first-line, :first-letter, :before, :after. Puis en CSS3, le pseudo-élément a été ajusté, et un ":" a été ajouté au précédent, qui devient désormais "::first-letter,::first-line,::before,::after", De plus, CSS3 ajoute également un "::selection". Deux '::' et un ' : ' sont principalement utilisés en CSS3 pour distinguer les pseudo-classes et les pseudo-éléments.

L'implémentation des pseudo-classes et des pseudo-éléments par Webkit est très forte. La barre de défilement peut être définie comme un élément de page et combinée avec certains attributs CSS3 avancés, tels que les dégradés, les coins arrondis, RGBa, etc. Ensuite, si vous devez utiliser des images à certains endroits, vous pouvez également convertir les images en Base64, sinon vous devrez charger plusieurs images à chaque fois et augmenter le nombre de requêtes.

N'importe quel objet peut être défini : bordures, ombres, images d'arrière-plan, etc. La barre de défilement créée complétera toujours son comportement interactif en fonction des paramètres du système d'exploitation lui-même. Les pseudo-classes suivantes peuvent être appliquées aux pseudo-éléments ci-dessus. C'est un peu compliqué. Pour plus de détails sur la façon de l'écrire, vous pouvez voir la première démo. Il y a aussi des commentaires.

:horizontal
//horizontal伪类适用于任何水平方向上的滚动条
:vertical
//vertical伪类适用于任何垂直方向的滚动条
:decrement
//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
:increment
//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮
:start
//start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面
:end
//end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面
:double-button
//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
:single-button
//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
:no-button
no-button伪类表示轨道结束的位置没有按钮。
:corner-present
//corner-present伪类表示滚动条的角落是否存在。
:window-inactive
//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。
::-webkit-scrollbar-track-piece:start {
/*滚动条上半边或左半边*/
}
::-webkit-scrollbar-thumb:window-inactive {
/*当焦点不在当前区域滑块的状态*/
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*当鼠标在水平滚动条下面的按钮上的状态*/
}

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!