div css 滾動(dòng)條樣式 DIV滾動(dòng)條屬性及樣式設(shè)置方式

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)還是比較有利于用戶體驗(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