天天看點

CSS定義網頁滾動條

(一)滾動條樣式主要涉及到如下CSS屬性:

overflow屬性: 檢索或設定當對象的内容超過其指定高度及寬度時如何顯示内容

overflow: auto;

在需要時内容會自動添加滾動條

overflow: scroll; 總是顯示滾動條

overflow-x: hidden;

禁止橫向的滾動條

overflow-y: scroll; 總是顯示縱向滾動條

(二)以下代碼定義滾動條的樣式:

<STYLE>

BODY {

SCROLLBAR-FACE-COLOR:

#f892cc;      

 //滾動條凸出部分的顔色

SCROLLBAR-HIGHLIGHT-COLOR:

#f256c6;     //滾動條空白部分的顔色

SCROLLBAR-SHADOW-COLOR:

#fd76c2;     //立體滾動條陰影的顔色

SCROLLBAR-3DLIGHT-COLOR:

#fd76c2;     //滾動條亮邊的顔色

SCROLLBAR-ARROW-COLOR:

#fd76c2;     //上下按鈕上三角箭頭的顔色

SCROLLBAR-TRACK-COLOR:

#fd76c2;     //滾動條的背景顔色

SCROLLBAR-DARKSHADOW-COLOR:

#f629b9;     //滾動條強陰影的顔色

SCROLLBAR-BASE-COLOR:

#e9cfe0;     //滾動條的基本顔色

}

</STYLE>

注意:如果你的靜态頁面頂端有類似與這樣的代碼<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0

Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> ,請将這段代碼删除或将BODY

{…}更改為HTML{…}即可見滾動條效果。

(三)網頁中去掉滾動條:

去掉橫向滾動條:<body  

style=’overflow:scroll;overflow-x:hidden’>  

去掉豎向滾動條:<body  

style=’overflow:scroll;overflow-y:hidden’>  

兩個都去掉:<body  

scroll=”no”>  

框加中去滾動條在name=””後面加 scrolling=”No”