DIV滾動條屬性及樣式設(shè)置方式有哪些

本篇內(nèi)容介紹了“DIV滾動條屬性及樣式設(shè)置方式有哪些”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

DIV滾動條屬性及樣式設(shè)置

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

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

示例代碼：

<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ù)內(nèi)容自動擴(kuò)撐區(qū)域的大小，即定義的區(qū)域無效

scroll總是顯示滾動條

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

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

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ù)內(nèi)容自動擴(kuò)撐區(qū)域的大小，即定義的區(qū)域無效

scroll總是顯示滾動條

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

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

“DIV滾動條屬性及樣式設(shè)置方式有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！