CSSスクロールバーの幅を設定する方法-CSSチュートリアル-php.cn

CSS でスクロールバーの幅を設定する方法: 1. 「::-webkit-scrollbar」疑似クラスセレクターを使用してスクロールバー全体を選択します; 2. スクロール全体の幅を設定しますbar から width 属性まで。構文形式は「::-webkit-scrollbar{width:width value;}」です。

CSSスクロールバーの幅を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

スクロールバーは現在多くのプロジェクトで使用されており、スクロールバーをシミュレートするために使用されることもあります。多くの大きなメールボックスは CSS スタイルを使用して設定されています。では、CSS でスクロールバーの幅を設定するにはどうすればよいですか? ?

CSS では、「::-webkit-scrollbar」疑似クラスセレクターと width 属性を使用して、スクロールバーの幅を設定できます。構文形式は次のとおりです:

::-webkit-scrollbar{ width:宽度值; }

ログイン後にコピー

次の疑似クラス要素セレクターを使用して、さまざまな Webkit ブラウザーのスクロールバースタイルを変更することもできます:

::-webkit-scrollbar スクロールバーの全体部分
: :-webkit-scrollbar-thumb スクロールバー内の小さな四角 (つまり、スクロールバースライダー) は上下に移動できます (または水平スクロールバーは左右に移動できます)
::-webkit-scrollbar-track スクロールバーのトラック (上の図のスクロールバーの溝に対応し、スクロールバーのスライダーである Thumb が含まれています)
::-webkit-scrollbar -button スクロールバーのトラックの両端にあるボタン。クリックすると小さな正方形の位置を微調整できます
#::-webkit-scrollbar-corner コーナー、つまり 2 つのスクロールバーの交差点
::-webkit-scrollbar-track-piece 内側トラック、中央スクロールバーの一部
#::-webkit-resizer 2 スクロールバーの交差点にある小さなコントロールで、

/*滚动条样式*/ .cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/ width:4px;/*高宽分别对应横竖滚动条的尺寸*/ height:4px; } .cal_bottom::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius:5px; -webkit-box-shadow: inset005pxrgba(0,0,0,0.2); background:rgba(0,0,0,0.2); } .cal_bottom::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset005pxrgba(0,0,0,0.2); border-radius:0; background:rgba(0,0,0,0.1); }

ログイン後にコピー

#例:

1.、スタイルパート

ログイン後にコピー

2. ボディパート

 11111111 11111111111111111111
 11111111111111111111
 11111111111111111111
 11111111111111111111
 11111111111111111111
 11111111111111111111
 11111111111111111111
 11111111111111111111
 11111111111111111111
 11111111111111111111

ログイン後にコピー

レンダリング:

#(学習ビデオ共有: CSSスクロールバーの幅を設定する方法 css ビデオチュートリアル