Maison > interface Web > tutoriel CSS > Style CSS pur : style de barre de défilement très utile

Style CSS pur : style de barre de défilement très utile

蔡军立
Libérer: 2022-11-19 10:49:13
original
176 Les gens l'ont consulté

Dans le processus de découpage, si on veut ajouter des barres de défilement localement dans certains DIV, ce sera très moche.

Lorsque nous sommes impatients, nous utilisons généralement le plug-in Jquery pour y parvenir. Et bien souvent, nous sommes toujours confrontés à des problèmes de compatibilité. En bref, l’expérience utilisateur n’est pas aussi bonne que l’utilisation directe de overflow:scroll.

Aujourd'hui, je voudrais recommander un style de barre de défilement CSS pur très facile à utiliser. Il vous suffit d'ajouter le code suivant à votre fichier CSS et vous pouvez utiliser overflow:scroll dans différentes positions à volonté.

L'effet d'affichage est également très bon.

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #ccc;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -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;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #c8c8c8;
}
Copier après la connexion

Et vous pouvez également définir directement les couleurs via 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:
1
source:php.cn
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal