ホームページ > 記事 > ウェブフロントエンド > CSS3でスクロールバーのスタイルをカスタマイズする方法
CSS3でスクロールバーのスタイルをカスタマイズする方法
- 清浅オリジナル
- 2018-12-08 10:45:036373ブラウズ
CSS3 でスクロール バーのスタイルをカスタマイズする方法: 最初に HTML サンプル ファイルを作成し、次に要素に「overflow:scroll」を設定してスクロール バーを生成します。最後に、各値を設定してスクロールを再カスタマイズします。スクロールバー属性の Bar スタイルで十分です。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
CSS3 では、オーバーフローを設定することでスクロール バーを生成できます。要素までスクロールし、スクロールバー属性の各値を設定してスクロール バーのスタイルを再カスタマイズします。スクロール バーはブラウザーには不可欠です。通常、Web サイトに独自のスクロール バーがあると、より人目を引き、Web サイトの見た目が変わります。 jQuery プラグインを使用してカスタム スクロール バーを実装することもできます。CSS3 を使用して独自のスクロール バーを作成することもできます。次の記事では、CSS3 を使用してカスタム スクロール バーを作成する方法を詳しく紹介します。
#overflow属性:主にコンテンツがはみ出した場合のスタイル(スクロールバーを限界を超えて表示するかどうか)を設定します overflow-x: 横方向のコンテンツがはみ出した場合の設定
overflow-y: 縦方向のコンテンツがオーバーフローする場合の設定
3 つの属性設定の値は、visible (デフォルト値)、scroll、hidden、auto です。
デフォルトのスクロールバースタイル:
<style type="text/css">
.scrollbar {
background-color: #F5F5F5;
height: 300px;
width: 65px;
margin: 100px auto;
overflow-y: scroll;//设置滚动条
}
.overflow {
height: 450px;
}
</style>
</head>
<body>
<div class="scrollbar" id="style-1">
<div class="overflow"></div>
</div>[推奨コース: CSS3 チュートリアル
]scrollbar属性: 
scrollbar-face-color: 3次元スクロールバーのはみ出し部分の色スクロールバーの矢印の色上下ボタンの三角矢印の色
スクロールバーの空白部分の色
スクロールバーシャドウ-color: 3 次元スクロール バーの境界線の色
注: これらの属性は IE ブラウザーでのみサポートされます
例:
scrollbar-face-color:pink;
レンダリング:
カスタム スクロール バー スタイル: 
-webkit-scrollbar: スクロール バーの全体部分 -webkit-scrollbar-button:スクロール バーの両端のボタン -webkit-scrollbar-track: 外側のレイヤー トラック
-webkit-scrollbar-track-piece: 内側のトラック、スクロール バーの中央部分 (削除)- webkit-scrollbar-thumb: ドラッグ バー
-webkit-scrollbar-corner: コーナー
-webkit-resizer: 右下隅のドラッグ ブロックのスタイルを定義します
例:
<style type="text/css">
.scrollbar {
background-color: #F5F5F5;
height: 300px;
width: 65px;
margin: 100px auto;
overflow-y: scroll;
}
.overflow {
height: 450px;
}
/*滚动条区域*/
#demo::-webkit-scrollbar{
width:20px;
background-color:#fff;
}
/*滚动条*/
#demo::-webkit-scrollbar-thumb{
background-color:#f196c4b3;
}
/*滚动条外层轨道*/
#demo::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 1px ;
background-color:pink;
border-radius: 10px;
}
</style>
}
</head>
<body>
<div class="scrollbar" id="demo">
<div class="overflow"></div>
</div>
</body>レンダリング: 要約 : 上記がこの記事の全内容です。この記事を通じて、カスタム スクロール バーの作成方法を皆さんに知っていただければ幸いです。 。
以上がCSS3でスクロールバーのスタイルをカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。