淺談～捲軸css

【淺談－捲軸CSS】

首先，我們先來了解關於捲軸的各項CSS參數

我把捲軸的CSS分解後，大家會比較容易了解，還有一個SCROLLBAR-BASE-COLOR(整體色彩)比較少被用到，所以沒寫在分解中，以上各種不同的顏色代表捲軸各種設定，依你自己的喜好自訂顏色。

以下再分享三種比較常用的捲軸CSS

背景色為黑色，只秀出上下箭頭，ＣＳＳ如下

SCROLLBAR-FACE-COLOR:#000000;
SCROLLBAR-TRACK-COLOR:#00000;
SCROLLBAR-ARROW-COLOR:#FFFFFF;
SCROLLBAR-HIGHLIGHT-COLOR:#000000;
SCROLLBAR-3DLIGHT-COLOR:#000000;
SCROLLBAR-SHADOW-COLOR:#000000;
SCROLLBAR-DARKSHADOW-COLOR:#000000;

若想設為以上的樣式，捲軸中的ＣＳＳ參數，都以背景底色為主，只有SCROLLBAR-FACE-COLOR(三角箭頭)設為不同色，如果將ＣＳＳ全部設為與背景色相同的話，三角箭頭不會出現捲軸也可以移動，但會看不出來，有種透明捲軸的感覺！

SCROLLBAR-FACE-COLOR:#FFFFFF;
SCROLLBAR-TRACK-COLOR:#FFFFFF;
SCROLLBAR-ARROW-COLOR:#000000;
SCROLLBAR-HIGHLIGHT-COLOR:#000000;
SCROLLBAR-3DLIGHT-COLOR:#FFFFFF;
SCROLLBAR-SHADOW-COLOR:#000000;
SCROLLBAR-DARKSHADOW-COLOR:#FFFFFF;

將
SCROLLBAR-ARROW-COLOR(三角箭頭)、
SCROLLBAR-HIGHLIGHT-COLOR(軸面左內邊)、
SCROLLBAR-SHADOW-COLOR(軸面右內邊)
設為與底色不同，就會出現以上的效果。

無背景色，預設為白底，捲軸設為立體效果

SCROLLBAR-FACE-COLOR: #4890FC;
SCROLLBAR-SHADOW-COLOR: #4800FC;
SCROLLBAR-3DLIGHT-COLOR: #00B4FC;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
SCROLLBAR-ARROW-COLOR: #FFFFFF;
SCROLLBAR-TRACK-COLOR: #FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;

將SCROLLBAR-FACE-COLOR(軸面)、SCROLLBAR-SHADOW-COLOR(軸面右內邊)設為相同色碼，SCROLLBAR-3DLIGHT-COLOR(左方立體邊)的顏色比上二個顏色還要淺，就會凸顯立體效果！

很多人在問，透明捲軸怎麼作？
除了上述的ＣＳＳ參數外，必須多加一個FILTER: Chroma( Color = #透明色碼);
注意：不是所有的HTML標簽都可以做，而且只適用於ＩＥ瀏覽器！

原始樣式的ＣＳＳ如下
SCROLLBAR-FACE-COLOR: #fcd800;
SCROLLBAR-HIGHLIGHT-COLOR: #fc0000;
SCROLLBAR-SHADOW-COLOR: #fc0000;
SCROLLBAR-3DLIGHT-COLOR: #fc0000;
SCROLLBAR-ARROW-COLOR: #0000d8;
SCROLLBAR-DARKSHADOW-COLOR: #fc0000;

在加上透明設定後，會將所設定的色碼抽取掉，變為白色，例如第二個效果

FILTER: Chroma( Color = #fcd800); －－將軸面色彩透明化
SCROLLBAR-FACE-COLOR: #fcd800; －－軸面色彩
SCROLLBAR-HIGHLIGHT-COLOR: #fc0000;
SCROLLBAR-SHADOW-COLOR: #fc0000;
SCROLLBAR-3DLIGHT-COLOR: #fc0000;
SCROLLBAR-ARROW-COLOR: #0000d8;
SCROLLBAR-DARKSHADOW-COLOR: #fc0000;

透明顏色可以自訂，選擇捲軸中的細項色彩，會呈現不同的效果。

透明捲軸語法適用於背景非單色時，例如你的背景是一張圖片，那麼加上透明化的參數，就會更美觀，而透明的顏色只要設為白色(#FFFFFF)即可，但若你的版面中在同一個區塊有一些已設為白色的文字或背景，那麼在加上捲軸透明色時，也會把一些設為白色的文字設定或底色去除喔！

以下是透明化的結果：

捲軸的ＣＳＳ語法要貼在哪裡？

這個問題很廣泛，輸入文字的表單或基本的HTML{ }、BODY{ }都可以貼上捲軸的語法，另外若使用在部落格或網誌，可以依網誌所設定的標簽自定捲軸，例如在無名網誌中的連結列#links{ }及文章區塊#content{ }，可以將捲軸的CSS語法貼在這二個標簽之中，就可以顯示效果了。

另外再補充捲軸的其他語法，可以與上述的ＣＳＳ並用！

OVERFLOW 設定捲軸出現的設定值，以下列出較常用的語法
OVERFLOW : Hidden; 　 不出現捲軸
OVERFLOW : Auto; 　瀏覽器判斷區塊是否超過設定的寬高，而出現捲軸
OVERFLOW : Scroll; 　強迫出現捲軸，無論是否超過預設的寬高

Hidden及Scroll也可以各別設定直捲軸Y 或 橫捲軸X
OVERFLOW-x : Hidden;　定義X 水平捲軸隱藏不出現
OVERFLOW-y : Hidden;　定義Y 垂直捲軸隱藏不出現
OVERFLOW-x : Scroll; 　強迫X 水平捲軸出現
OVERFLOW-y : Scroll; 　強迫Y 垂直捲軸出現

最後提供給大家二個捲軸製造機，可以不用費心的自訂色碼囉！
捲軸製造機１http://yagin92.googlepages.com/15.htm
捲軸製造機２http://cdh.idv.tw/cdh/no04.htm

以上引用自:http://tw.myblog.yahoo.com/selean-lin/article?mid=4738&page=1#5590

*******************************************************************************