這里向大家描述一下DIV滾動條屬性及樣式設置，所謂DIV滾動條，就是利用DIV標簽，在里面嵌入CSS樣式表，加入overflow的屬性值，這樣，當div所規(guī)范的區(qū)域內的內容達到一定程序時，滾動條就派上用場。

DIV滾動條屬性及樣式設置

所謂DIV滾動條，就是利用DIV標簽，在里面嵌入CSS樣式表，加入overflow的屬性值，這樣，當div所規(guī)范的區(qū)域內的內容達到一定程序時，滾動條就派上用場。其功能大約是為了節(jié)約頁面空間，就是所謂的“縮地”了。

當div所定義的區(qū)域的內容達到一定程度時，在div標簽里面嵌入css樣式表，定義overflow的屬性值，設置DIV滾動條相關的屬性。

示例代碼：

<styletylestyletyle="text/css"> 
.testDiv{  
border-style:solid;  
border-width:50px;  
border-color:pink;  
 
position:absolute;  
top:200px;  
left:300px;  
height:200px;  
width:300px;  
 
overFlow-x:scroll;  
overFlow-y:hidden;  
 
scrollBar-face-color:green;  
scrollBar-hightLight-color:red;  
scrollBar-3dLight-color:orange;  
scrollBar-darkshadow-color:blue;  
scrollBar-shadow-color:yellow;  
scrollBar-arrow-color:purple;  
scrollBar-track-color:black;  
scrollBar-base-color:pink;  
 
}  
 
</style> 
 

 注：

1.overFlow:

visible卻省值，沒有DIV滾動條，根據(jù)內容自動擴撐區(qū)域的大小，即定義的區(qū)域無效

scroll總是顯示滾動條

hidden沒有滾動條，超出區(qū)域的內容不可見

auto根據(jù)內容自動判斷是否添加滾動條

2.DIV滾動條顏色屬性：

face-color：滑塊顏色

hightlight-color：高亮顏色

3dlight-color：三維光線顏色

darkshadow-color：暗影顏色

shadow-color：陰影顏色

arrow-color：箭頭顏色

track-color：滑道顏色

base-color：DIV滾動條的主要顏色，其中包含滾動按鈕和滾動滑塊

3.overFlow-xoverFlow-y

visible卻省值，沒有DIV滾動條，根據(jù)內容自動擴撐區(qū)域的大小，即定義的區(qū)域無效

scroll總是顯示滾動條

hidden沒有DIV滾動條，超出區(qū)域的內容不可見

auto根據(jù)內容自動判斷是否添加滾動條
 

【編輯推薦】

1. 專家解惑 DIV是什么意思？
2. JavaScript動態(tài)創(chuàng)建div屬性和樣式
3. SPAN元素和DIV元素的區(qū)別
4. CSS2.0中page-break-after屬性用法
5. 探究CSS中border:none;與border:0;的區(qū)別