本文和大家重點討論一下DIV Scroll屬性的用法，在CSS中DIV Scroll屬性還是比較實用的，這里和大家分享一下它的使用，希望對你的學習有所幫助。

DIV Scroll屬性

DIV Scroll屬性詳解，為DIV層打造不同的滾動條。

一、scrollbar屬性、樣式詳解

1．overflow內容溢出時的設置（設定被設定對象是否顯示滾動條）

overflow-x水平方向內容溢出時的設置

overflow-y垂直方向內容溢出時的設置

以上屬性設置的值為visible(默認值)、scroll(出現滾動條)、hidden(隱藏)、auto()瀏覽器自動設置)。

2．scrollbar-3d-light-color立體滾動條亮邊的顏色（設置滾動條的顏色）

scrollbar-arrow-color上下按鈕上三角箭頭的顏色

scrollbar-base-color滾動條的基本顏色

scrollbar-dark-shadow-color立體滾動條強陰影的顏色

scrollbar-face-color立體滾動條凸出部分的顏色

scrollbar-highlight-color滾動條空白部分的顏色

scrollbar-shadow-color立體滾動條陰影的顏色#p#

二、我們通過幾個實例來講解上述的樣式屬性：

1.設定多行文本框的滾動條

沒有水平滾動條 

<textareastyletextareastyle="overflow-x:hidden"></textarea> 
 

沒有垂直滾動條 

<textareastyletextareastyle="overflow-y:hidden"></textarea> 
 

沒有滾動條 

<textareastyletextareastyle="overflow-x:hidden;  
overflow-y:hidden"></textarea> 
或<textareastyletextareastyle="overflow:hidden"></textarea> 
 
 

2.讓瀏覽器窗口永遠都不出現滾動條

沒有水平滾動條 

<bodystylebodystyle="overflow-x:hidden"> 
 

沒有垂直滾動條 

<bodystylebodystyle="overflow-y:hidden"> 
 

沒有滾動條 

<bodystylebodystyle="overflow-x:hidden;overflow-y:hidden"> 
或<bodystylebodystyle="overflow:hidden"> 

#p#3.在樣式表文件中定義好一個類，調用樣式表。 

<style> 
.coolscrollbar{scrollbar-arrow-color:yellow;  
scrollbar-base-color:lightsalmon;}  
</style> 
 

這樣調用：

<textareaclasstextareaclass="coolscrollbar"></textarea> 
 

Scrollbar-Face-Color為滾動條表面顏色設定；

Scrollbar-Highlight-Color為滾動條上斜面和左斜面顏色設定；

Scrollbar-Shadow-Color為滾動條下斜面和右斜面顏色設定；

Scrollbar-3Dlight-Color為滾動條上邊和左邊的邊沿顏色設定；

Scrollbar-Arrow-Color為滾動條兩端箭頭顏色設定。

Scrollbar-Track-Color為滾動條底板顏色設定；

Scrollbar-Darkshadow為滾動條下邊和右邊邊沿顏色設定。

實例： 

body{  
background-color:#ffffff;  
color:#336699;  
SCROLLBAR-FACE-COLOR:#BED8EB;  
SCROLLBAR-SHADOW-COLOR:#DDF8FF;  
SCROLLBAR-HIGHLIGHT-COLOR:#92C0D1;  
SCROLLBAR-3DLIGHT-COLOR:#DDF8FF;  
SCROLLBAR-DARKSHADOW-COLOR:#92C0D1;  
SCROLLBAR-TRACK-COLOR:#BED8EB;  
SCROLLBAR-ARROW-COLOR:#92C0D1  
}  
 

4.設定窗口滾動條的顏色

設置窗口滾動條的顏色為紅色<bodystyle="scrollbar-base-color:red">
scrollbar-base-color設定的是基本色，一般情況下只需要設置這一個屬性就可以達到改變滾動條顏色的目的。

加上一點特別的效果： 

<bodystylebodystyle="scrollbar-arrow-color:yellow;  
scrollbar-base-color:lightsalmon"> 
 

【編輯推薦】

1. 實現CSS中div列高度自適的3種途徑
2. JavaScript動態創建div屬性和樣式
3. SPAN元素和DIV元素的區別
4. CSS float方法實現DIV CSS網頁布局三欄頁
5. 探究CSS中border:none;與border:0;的區別