div css 滾動(dòng)條樣式 DIV滾動(dòng)條屬性及樣式設(shè)置方式
我要評(píng)論DIV滾動(dòng)條就是利用DIV標(biāo)簽，在里面嵌入CSS樣式表，當(dāng)div所定義的區(qū)域的內(nèi)容達(dá)到一定程度時(shí)，在div標(biāo)簽里面嵌入CSS樣式表，定義overflow的屬性值，設(shè)置DIV滾動(dòng)條相關(guān)的屬性。
這里向大家描述一下DIV滾動(dòng)條屬性及樣式設(shè)置，所謂DIV滾動(dòng)條，就是利用DIV標(biāo)簽，在里面嵌入CSS樣式表，加入overflow的屬性值，這樣，當(dāng)div所規(guī)范的區(qū)域內(nèi)的內(nèi)容達(dá)到一定程序時(shí)，滾動(dòng)條就派上用場(chǎng)。
DIV滾動(dòng)條屬性及樣式設(shè)置
所謂DIV滾動(dòng)條，就是利用DIV標(biāo)簽，在里面嵌入CSS樣式表，加入overflow的屬性值，這樣，當(dāng)div所規(guī)范的區(qū)域內(nèi)的內(nèi)容達(dá)到一定程序時(shí)，滾動(dòng)條就派上用場(chǎng)。其功能大約是為了節(jié)約頁(yè)面空間，就是所謂的“縮地”了。看看效果如何吧，代碼在下一樓提供。
當(dāng)div所定義的區(qū)域的內(nèi)容達(dá)到一定程度時(shí)，在div標(biāo)簽里面嵌入css樣式表，定義overflow的屬性值，設(shè)置DIV滾動(dòng)條相關(guān)的屬性。
示例代碼：
<style type="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卻省值，沒(méi)有DIV滾動(dòng)條，根據(jù)內(nèi)容自動(dòng)擴(kuò)撐區(qū)域的大小，即定義的區(qū)域無(wú)效
scroll總是顯示滾動(dòng)條
hidden沒(méi)有滾動(dòng)條，超出區(qū)域的內(nèi)容不可見(jiàn)
auto根據(jù)內(nèi)容自動(dòng)判斷是否添加滾動(dòng)條
2.DIV滾動(dòng)條顏色屬性：
face-color：滑塊顏色
hightlight-color：高亮顏色
3dlight-color：三維光線顏色
darkshadow-color：暗影顏色
shadow-color：陰影顏色
arrow-color：箭頭顏色
track-color：滑道顏色
base-color：DIV滾動(dòng)條的主要顏色，其中包含滾動(dòng)按鈕和滾動(dòng)滑塊
3.overFlow-xoverFlow-y
visible卻省值，沒(méi)有DIV滾動(dòng)條，根據(jù)內(nèi)容自動(dòng)擴(kuò)撐區(qū)域的大小，即定義的區(qū)域無(wú)效
scroll總是顯示滾動(dòng)條
hidden沒(méi)有DIV滾動(dòng)條，超出區(qū)域的內(nèi)容不可見(jiàn)
auto根據(jù)內(nèi)容自動(dòng)判斷是否添加滾動(dòng)條
相關(guān)文章
純div+css實(shí)現(xiàn)的固定在網(wǎng)站底部不隨網(wǎng)站滾動(dòng)的在線客服特效源碼
本款是一段由純div+css代碼是實(shí)現(xiàn)的將在線客服功能控制在網(wǎng)站底部不隨網(wǎng)頁(yè)滾動(dòng)條滾動(dòng)而改變位置的特效源碼，運(yùn)行流暢，反應(yīng)速度靈敏，是一段非常優(yōu)秀的特效源碼2014-10-27CSS控制DIV永遠(yuǎn)固定在頁(yè)面底部不隨滾動(dòng)而滾動(dòng)
控制DIV永遠(yuǎn)固定在頁(yè)面底部的方法有很多，基本上都是通過(guò)css或js來(lái)實(shí)現(xiàn)的，本節(jié)也實(shí)現(xiàn)了一個(gè)這樣的效果，大家可以學(xué)習(xí)下2014-06-03- 使用CSS樣式設(shè)置div滾動(dòng)條，直接充當(dāng)了文本框的角色，下面為大家介紹下具體的實(shí)現(xiàn)，感興趣的朋友可以參考下2013-12-24
css將div層固定顯示在頁(yè)面底部不隨滾動(dòng)條滾動(dòng)
將div層固定顯示在頁(yè)面底部，在某些情況下還是很實(shí)用的，在本文為大家介紹下使用css是如何實(shí)現(xiàn)的，需要的碰可以參考下2013-11-20css實(shí)現(xiàn)div自動(dòng)添加滾動(dòng)條(圖片或文字等超出時(shí)顯示)
css實(shí)現(xiàn)div自動(dòng)添加滾動(dòng)條比較實(shí)用的功能，當(dāng)圖片或文字超出div所規(guī)定的寬或高時(shí)，會(huì)自動(dòng)出現(xiàn)滾動(dòng)條，這一點(diǎn)還是比較有利于用戶(hù)體驗(yàn)的，本文整理了一些實(shí)現(xiàn)自動(dòng)滾動(dòng)條的方2013-01-25css 給div添加滾動(dòng)并隱藏滾動(dòng)條
這篇文章主要介紹了css 給div添加滾動(dòng)并隱藏滾動(dòng)條的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-09
