純粋な CSS スタイル: 非常に便利なスクロール バー スタイル

スライスの過程で、一部の DIV にローカルにスクロール バーを追加すると、非常に見苦しくなります。

せっかちなときは、通常、Jquery プラグインを使用してそれを実現します。つまり、ユーザー エクスペリエンスは、overflow:scroll を直接使用する場合ほど良くありません。

今日は、非常に使いやすい純粋な CSS スクロール バー スタイルをお勧めします。次のコードを CSS ファイルに追加するだけで、overflow:scroll をさまざまな位置で自由に使用できます。

ディスプレイ効果も非常に優れています。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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;
}

また、CSS を通じて色を直接定義することもできます。

以上が純粋な CSS スタイル: 非常に便利なスクロール バー スタイルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。