CSS3のカスタムスクロールバーのスタイルを[ターン]

オーバーフローの紹介

定義：それは、コンテンツクリップは、スクロールバーまたは表示コンテンツのレンダリングするかどうか、そのブロックレベルのコンテナをオーバーフローしたときにオーバーフロー属性が指定されます。

プロパティ値

overflow:visible    //默认值。内容不会被修剪，超出内容会显示在元素框之外
overflow:hidden     //内容会被修剪。超出内容被隐藏
overflow:scroll     //内容会被修剪，浏览器会显示滚动条以便查看其余内容
overflow:auto       //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 overflow:inherit //规定从该父元素继承overflow属性的值

注意：（IE8を含む）のInternet Explorerのどのバージョンでは、プロパティ値「継承」をサポートしていません。

オーバーフローがデフォルト値以外の値に設定されている場合には（目に見える）の外側には、意志を作成します块级式化上下文（浮動道をクリアするために）、あなたはBFCとマージンの崩壊のより深い理解を表示することができます

小さなヒント

場合プロパティを使用することができるものを超えたプロセスの部分のテキストの行。（幅、並びに、要素の値つつ設定するoverflow:hidden;とwhite-space:nowrap;）

text-overflow:clip       //修剪文本。
text-overflow:ellipsis   //显示省略符号来代表被修剪的文本。
text-overflow:string     //使用给定的字符串来代表被修剪的文本。

あなたは非標準プロパティを使用する必要がある複数行のテキストのために-webkit-line-clamp、ここでは詳細には触れません。リファレンスはこちらをクリック

水平および垂直スクロールバーを
使用overflow-xし、overflow-y別々に配置されてもよいし、垂直方向に水平スクロールバー。

カスタムスクロールバーを実現します

カーネルのこのセクションでは、WebKitのブラウザ、次のように、デフォルトのスタイルのスクロールバーを変更するために擬似クラスを使用します。
スクロールバーの一部を

:: -スクロールバーのWebKitの、スクロールバー一体部分
 :: -小さなボックス内のWebKit、スクロールバーのサムスクロールバーは、上下方向に移動させることができる（左右移動）
 :: - WebKitの-スクロールバートラックのトラックスクロールバー（親指が装備されている）
 :: -トラックボタンのWebKit-スクロールバーのボタン、スクロールバーの両端に、原因の場所に微調整の小さなボックスをクリックして。
 :: - WebKitの-スクロールバー-TRACK-ピース内側軌道スクロールバー中間部分
 :: -垂直スクロールバーと水平スクロールバーが交差のWebKit-スクロールバーコーナーエッジ、即ち、
 :: - WebKitの-リサイズ2つのスクロールバー交差点でのウィジェットのサイズを変更要素をドラッグ

次のようにスクロールバー組成物の構造は次のとおりです。

（WebKitのブラウザカーネルのこのセクションでは、デフォルトのスクロールバーのスタイルを変更するために擬似クラスを使用します）

IEのスクロールバーのスタイル

スクロールバーのスタイル	サポート	サポートされているブラウザのバージョン	あなたは継承することができます	説明
スクロールバー-3dlight色	特定のIE	IE5.5 +	と	スクロールボックスの色やスクロールバーの矢印の上側左端を設定
スクロールバーのハイライトカラー	特定のIE	IE5.5 +	と	スクロールボックスの色やスクロールバーの矢印の上側左端を設定
スクロールバーの顔色	特定のIE	IE5.5 +	と	スクロールボックスとスクロールバーの矢印の色を設定します
スクロールバーの矢印の色	特定のIE	IE5.5 +	と	スクロールバーの矢印の色を設定します。
スクロールバーの影の色	特定のIE	IE5.5 +	と	スクロールボックスの色やスクロールバーの矢印の右下端を設定します
スクロールバーの暗い影の色	特定のIE	IE5.5 +	と	スクロールバーの溝の色を設定します。
スクロールバーベースカラー	特定のIE	IE5.5 +	と	メインのスクロールバー部分の色に提供され、
スクロールバーのトラック色	特定のIE	IE5.5 +	と	色のスクロールバーのトラック部分を設定します

Firefoxのスクロールバーの変更

http://bbs.kafan.cn/thread-1529981-1-1.html