CSS滾動(dòng)條實(shí)現(xiàn)步驟及美化小技巧

在原來(lái)的 html 的時(shí)候，我們可以這樣定義整個(gè)頁(yè)面的滾動(dòng)條
body{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
   scrollbar-highlight-color:#fff; /*- 左二 -*/
   scrollbar-face-color:#E4E4E4; /*- 面子 -*/
   scrollbar-arrow-color:#666; /*- 箭頭 -*/
   scrollbar-shadow-color:#808080; /*- 右二 -*/
   scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
   scrollbar-base-color:#D7DCE0; /*- 基色 -*/
   scrollbar-track-color:#;/*- 滑道 -*/
}

但是同樣的代碼，我們應(yīng)用在 xhtml 下就不起作用了，我相信好多朋友也遇到過(guò)同樣的問題
那么怎么才能在 xhtml 下應(yīng)用滾動(dòng)條樣式呢？看下列代碼
html{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
   scrollbar-highlight-color:#fff; /*- 左二 -*/
   scrollbar-face-color:#E4E4E4; /*- 面子 -*/
   scrollbar-arrow-color:#666; /*- 箭頭 -*/
   scrollbar-shadow-color:#808080; /*- 右二 -*/
   scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
   scrollbar-base-color:#D7DCE0; /*- 基色 -*/
   scrollbar-track-color:#;/*- 滑道 -*/
}

這段代碼和上一段唯一的不同就是在 CSS 定義的元素上，一個(gè)是 body 一個(gè)是 html。我們?cè)贉y(cè)試一下，把 html 頁(yè)面的"body"修改成"html"測(cè)試一下，發(fā)現(xiàn)依然可以實(shí)現(xiàn)效果。那到底是為什么呢？

從字面上來(lái)看，xhtml 比 html 多一個(gè) x,那么這個(gè) x 其實(shí)也就是 xml,為什么要加一個(gè) xml 在里面？其實(shí)最根本的原因就是要讓 html 更加結(jié)構(gòu)化標(biāo)準(zhǔn)化（因?yàn)?html 實(shí)在是太爛）。我們?cè)?html 里面定義的是 body，因?yàn)?html 不是很標(biāo)準(zhǔn)所以這樣可以生效，而在xhtml里面這樣就不行了，我看看那個(gè)圖很明顯，body 標(biāo)簽本身不是根元素，只有 html 才是根元素，而頁(yè)面的滾動(dòng)條也是屬于根元素的，所以這就是我們?yōu)槭裁炊x body 沒有效果的原因，因?yàn)槲覀兌x的只是一個(gè)子原素。ok，我們知道了原理，來(lái)做一個(gè)試驗(yàn)如果把定義"body"或"xhtml"換成?*?，
*{
scrollbar-3dlight-color:#D4D0C8; 
   scrollbar-highlight-color:#fff; 
   scrollbar-face-color:#E4E4E4; 
   scrollbar-arrow-color:#666; 
   scrollbar-shadow-color:#808080; 
   scrollbar-darkshadow-color:#D7DCE0; 
   scrollbar-base-color:#D7DCE0; 
   scrollbar-track-color:#;
}

在html和xhtml都通過(guò)，因?yàn)?就是定義頁(yè)面上的任何標(biāo)簽當(dāng)然也包括了“html”這個(gè)標(biāo)簽。

(ps:其實(shí)與其說(shuō)是 html 與 xhtml 的區(qū)別到不如說(shuō)是有無(wú) XHTML 1.0 transitional doctype的區(qū)別，但是如果你把頁(yè)面的 XHTML 1.0 transitional doctype 去掉的話，那么這個(gè)頁(yè)面就沒有 doctype，默認(rèn)的顯示方式就是html4.01,不過(guò)你要把XHTML 1.0 transitional doctype 修改成 HTML 4.01 doctype 同樣頁(yè)面定義 body 也不會(huì)有效果的，雖然這個(gè)頁(yè)面的標(biāo)準(zhǔn)是html 4.01) 

網(wǎng)上都說(shuō)使用 ?overflow-y:hidden? 可以隱藏滾動(dòng)條，但是只能針對(duì) div 元素，并不能隱藏瀏覽器，而一些資料說(shuō) <boby>里加入?scroll="no"?，可隱藏滾動(dòng)條；在<boby>里加入?style="overflow-x:hidden"?，可隱藏水平滾動(dòng)條；加入?style="overflow-y:hidden"?，可隱藏垂直滾動(dòng)條。

1、完全隱藏

　　在里加入?scroll="no"?，可隱藏滾動(dòng)條;

2、在不需要時(shí)隱藏

　　指當(dāng)瀏覽器窗口寬度或高度大于頁(yè)面的寬或高時(shí)，不顯示滾動(dòng)條;反之，則顯示;

3、樣式表方法

　　在里加入?style="overflow-x:hidden"?，可隱藏水平滾動(dòng)條;

　　加入?style="overflow-y:hidden"?，可隱藏垂直滾動(dòng)條。

body{ overflow-x:hidden; } 在標(biāo)準(zhǔn) DTD 下是不可以的

html { overflow: scroll; }

• 強(qiáng)制隱藏滾動(dòng)條:html { overflow: hidden; }
• 隱藏IE的水平滾動(dòng)條:html { overflow-x: hidden; }
• 隱藏IE的垂直滾動(dòng)條:html { overflow-y: hidden; }
• 強(qiáng)制顯示IE的水平滾動(dòng)條:html { overflow-x: scroll; }
• 強(qiáng)制顯示IE的垂直滾動(dòng)條:html { overflow-y: scroll; }
• 強(qiáng)制顯示Mozilla的水平滾動(dòng)條:html { overflow:-moz-scrollbars-horizontal; }
• 注意: 僅僅強(qiáng)制顯示水平滾動(dòng)條. 也就是說(shuō), 即使需要顯示垂直滾動(dòng)條時(shí), 垂直滾動(dòng)條也不會(huì)出現(xiàn).
• 強(qiáng)制顯示Mozilla的垂直滾動(dòng)條:html { overflow:-moz-scrollbars-vertical; }
• 注意: 僅僅強(qiáng)制顯示垂直滾動(dòng)條. 也就是說(shuō), 即使需要顯示水平滾動(dòng)條時(shí), 水平滾動(dòng)條也不會(huì)出現(xiàn).

最終的解決辦法：

在頁(yè)面添加:

各種瀏覽器對(duì)CSS滾動(dòng)條的支持情況：

這里說(shuō)的 Webkit 瀏覽器包括谷歌瀏覽器，蘋果公司的 Safari 瀏覽器，以及最新的 Opera 瀏覽器。這些瀏覽器加起來(lái)占有超過(guò)半數(shù)的桌面瀏覽器市場(chǎng)份額。對(duì)于移動(dòng)端瀏覽器，基本上是谷歌瀏覽器和 Safari 瀏覽器的天下。唯一的遺憾是火狐瀏覽器，至今沒有對(duì)CSS滾動(dòng)條屬性做任何的改進(jìn)。至于IE瀏覽器，我們期待吧。

鑒于目前瀏覽器市場(chǎng)的格局，我們很有信心相信 CSS 滾動(dòng)條美化功能會(huì)有很好的很光明的前景。

很多年前谷歌瀏覽器就已經(jīng)開始支持對(duì)滾動(dòng)條的 CSS 美化。這些 Webkit 瀏覽器專屬的CSS屬性需要使用 -webkit- 瀏覽器引擎前綴，我們?cè)谶@里將只會(huì)使用一些基本的CSS滾動(dòng)條屬性，在代碼里會(huì)增加一些必要的解釋說(shuō)明。

當(dāng) CSS 中出現(xiàn)偽元素樣式時(shí)，Webkit 引擎將會(huì)關(guān)閉它的缺省滾動(dòng)條樣式輸出，只使用CSS里提供的樣式信息。

這里是其它一些偽元素樣式：
加上了這些 CSS 屬性，你將會(huì)看到下面的效果(再次提醒：你需要使用 Webkit 瀏覽器，比如谷歌瀏覽器才能看到效果)。

用CSS調(diào)整滾動(dòng)條配色

IE瀏覽器可以通過(guò)調(diào)整CSS的方式，來(lái)給滾動(dòng)條換色。

代碼如下：
具體樣式對(duì)應(yīng)的滾動(dòng)條區(qū)域如圖所示：