Style de barre de défilement personnalisé CSS3 : explication détaillée de webkit-scrollbar

Avez-vous déjà pensé que la barre de défilement d'origine fournie avec le navigateur est très disgracieuse ? En même temps, vous avez également vu que les barres de défilement personnalisées de nombreux sites Web ont l'air haut de gamme ? a abandonné la barre de défilement d'origine, qui est bien plus belle. Alors, comment le navigateur Webkit personnalise-t-il la barre de défilement ?

Avant-propos

Webkit prend en charge les zones avec des attributs de débordement, des zones de liste, des menus déroulants et des styles personnalisés de barre de défilement de zone de texte, il est donc très utile. Bien entendu, il n’existe actuellement aucun style de barre de défilement compatible avec tous les navigateurs.

Démo

Jetons un coup d'œil à ces deux démos de barre de défilement : demo1 (version image), demo2 (version CSS3 pure)

Barre de défilement composition

• ::-webkit-scrollbar La partie entière de la barre de défilement

• ::-webkit-scrollbar-thumb Le petit carré à l'intérieur la barre de défilement peut se déplacer de haut en bas (ou de gauche à droite, selon qu'il s'agit d'une barre de défilement verticale ou horizontale)

• ::-webkit-scrollbar-track La trace du barre de défilement (qui contient le pouce)

• ::-webkit-scrollbar-button boutons aux deux extrémités de la piste de la barre de défilement, vous permettant d'affiner la position du petit carré en en cliquant dessus.

• ::-webkit-scrollbar-track-piece Piste intérieure, partie centrale de la barre de défilement (supprimée)

• ::-webkit- scrollbar-corner corner, c'est-à-dire l'intersection de deux barres de défilement

• ::-webkit-resizer Le petit coin à l'intersection de deux barres de défilement utilisé pour ajuster la taille de l'élément en faisant glisser Contrôle

Version concise

Le code détaillé ne sera pas publié ici. Vous pouvez trouver les paramètres de style spécifiques en consultant le code source dans la démo. Jetons un coup d'œil au style de la deuxième barre de défilement dans la démo2

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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 pseudo- sélecteurs de classe ont été ajoutés à CSS3, tels que : nth-child. , :last-child, :nth-last-of-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 est 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!