DIV中Scroll屬性如何使用

DIV中Scroll屬性如何使用，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

DIV Scroll屬性

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

一、scrollbar屬性、樣式詳解

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

overflow-x水平方向內(nèi)容溢出時的設(shè)置

overflow-y垂直方向內(nèi)容溢出時的設(shè)置

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

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

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

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

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

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

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

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

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

1.設(shè)定多行文本框的滾動條

沒有水平滾動條

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

沒有垂直滾動條

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

沒有滾動條

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

2.讓瀏覽器窗口永遠(yuǎn)都不出現(xiàn)滾動條

沒有水平滾動條

<bodystylebodystyle="overflow-x:hidden">

沒有垂直滾動條

<bodystylebodystyle="overflow-y:hidden">

沒有滾動條

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

3.在樣式表文件中定義好一個類，調(diào)用樣式表。

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

這樣調(diào)用：

<textareaclasstextareaclass="coolscrollbar"></textarea>

Scrollbar-Face-Color為滾動條表面顏色設(shè)定；

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

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

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

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

Scrollbar-Track-Color為滾動條底板顏色設(shè)定；

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

實例：

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.設(shè)定窗口滾動條的顏色

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

加上一點特別的效果：

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

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。