CSS はスクロール バーを設定します style_html/css_WEB-ITnose

スクロール バーは現在ほとんどのプロジェクトで使用されており、シミュレートされたスクロール バーが使用されることもあります。ここでスクロール バー CSS について話しましょう。

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

以下では、これらの属性の使用方法とその意味について説明します。

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

主に以下の7つのプロパティがあります

1. ::-webkit-scrollbar スクロールバー全体、幅を設定できます
2. ::- webkit-scrollbar- button スクロール バーの両端のボタン
3. ::-webkit-scrollbar-track 外側のトラック
4. ::-webkit-scrollbar-track-piece 内側のスクロール グルーブ
5. :: -webkit-scrollbar- サムスクロール スライダー
6. ::-webkit-scrollbar-corner Corner
7. ::-webkit-resizer 右下隅のドラッグ ブロックのスタイルを定義します

図に示すように:

上記は、スクロール バーの主な設定プロパティと、より詳細な CSS プロパティです

:horizo​​ntal 水平スクロール バー

:vertical垂直スクロール バー

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

:increment decrement は類似しており、ボタンまたは内部トラックがビューポートの位置を増やすかどうかを示します (たとえば、垂直スクロール バーの下、水平スクロール バーの右側)。

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

: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);}

2: IE で CSS を使用してスクロール バーを設定する

IE では比較的簡単にカスタマイズできる項目が少なく、すべて色です。

scrollbar-arrow-color: color; /*三角矢印の色*/
scrollbar-face-color: color; /*三次元スクロールバーの色（矢印の背景色を含む） part)*/
scrollbar- 3dlight-color: color; /* 3 次元スクロール バーの明るい端の色 */
scrollbar-highlight-color: /* スクロール バーのハイライト色; (左の影?)*/
scrollbar-shadow-color: color; /*3 次元スクロール バーの影の色*/
scrollbar-darkshadow-color: /* 外側の影の色; 3 次元スクロール バー*/
scrollbar-track-color: color; /* 3 次元スクロール バーの背景色 */
scrollbar-base-color: color; /* スクロール バーの基本色*/

著者: 嵐の後に虹を見ましょう

出典: http://www.cnblogs.com/moqiutao/

この記事があなたの研究に役立つと思われる場合は、サポートしてくださいそして私を励ましてください。