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

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;
}

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!