cssでスクロールバーのスタイルを変更する

藏色散人

リリース： 2023-01-04 09:35:04

オリジナル

22189 人が閲覧しました

CSS でスクロールバーのスタイルを変更する方法: 1. "-webkit-scrollbar" 属性を通じてスクロールバー全体を設定します; 2. スクロールバーの両端のボタンを設定します。「-webkit-scrollbar-button」属性など。

cssでスクロールバーのスタイルを変更する

# この記事の動作環境：Windows7システム、HTML5&&CSS3バージョン、デルのG3コンピューター。

現在のプロジェクトのほとんどでスクロールバーが使用されており、場合によってはシミュレートされたスクロールバーが使用されるため、スクロールバーの CSS も解決できるようになりました。

たとえば、NetEase メールボックスのスクロールバーは非常に見栄えがよく、CSS を使用して設定されており、Webkit ブラウザ用です。図に示すように:

cssでスクロールバーのスタイルを変更するこれらの属性の使用方法とその意味を説明しましょう。

1: Webkit配下のCSSはスクロールバーを設定します

主に以下の7つのプロパティを持ちます

::-webkit-scrollbar-button スクロールバーの両端のボタン
::-webkit-scrollbar-track 外側のトラック
::-webkit-scrollbar -track-piece 内側のスクロール溝
##::-webkit-scrollbar-thumb スクロールスライダー
::-webkit-scrollbar-corner Corner
:: -webkit-resizer は、右下隅のドラッグブロックのスタイルを定義します。
#図に示すように:

上記は主な設定プロパティです。 CSS プロパティ cssでスクロールバーのスタイルを変更する
:水平水平スクロールバー

#:垂直垂直スクロールバー

#:デクリメントは、ボタンと内部トラック (トラック部分) に適用されます。）。これは、ボタンまたは内部トラックがウィンドウの位置を減らすかどうかを示すために使用されます (たとえば、垂直スクロールバーの上、水平スクロールバーの左側)。

:increment decrement は同様です。ボタンまたは内部トラックを示すために使用されます。トラックがビューポートの位置を増やすかどうか (たとえば、垂直スクロールバーの下、水平スクロールバーの右側)。

:疑似クラスも開始します。ボタンとスライダーに適用されます。オブジェクトをスライダーの前に配置するかどうかを定義するために使用されます。

:end は start 疑似クラスに似ており、オブジェクトがスライダーの後ろに配置されているかどうかを識別します。

:double-button この疑似クラスは、ボタンと内部トラックに使用されます。ボタンがスクロールバーの同じ端に配置された 1 対のボタンの 1 つであるかどうかを判断するために使用されます。内側トラックの場合、これは内側トラックが一対のボタンの隣にあるかどうかを示します。

:single-button は、double-button 疑似クラスに似ています。ボタンの場合、ボタンがスクロールバーのセクションに独立して存在するかどうかを判断するために使用されます。内側トラックの場合、内側トラックが単一ボタンの隣にあるかどうかを示します。

:no-button は内側のトラックに使用され、スクロールバーの両端にボタンがない場合など、内側のトラックをスクロールバーの端までスクロールするかどうかを示します。

:corner-present はすべてのスクロールバートラックに使用され、スクロールバーの丸い角が表示されるかどうかを示します。

:window-inactive はすべてのスクロールバートラックに使用され、スクロールバーが適用されるページコンテナー (要素) が現在アクティブかどうかを示します。 (Webkit の最近のバージョンでは、この疑似クラスは ::selection 疑似要素にも使用できます。Webkit チームはこれを拡張し、標準の疑似クラスになるよう推進する予定です)

CSS はこれも非常に簡単です。例:

/* 设置滚动条的样式 */
::-webkit-scrollbar {
width:12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background:rgba(255,0,0,0.4);
}

ログイン後にコピー

[推奨学習:

css ビデオチュートリアル

]2. IE の下の CSS 設定スクロールバー