ホームページ > ウェブフロントエンド > CSSチュートリアル > 純粋な CSS スタイル: 非常に便利なスクロール バー スタイル

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

蔡军立
リリース: 2022-11-19 10:49:13
オリジナル
177 人が閲覧しました

スライスの過程で、一部の 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 サイトの他の関連記事を参照してください。

関連ラベル:
1
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート