為div設置滾動條


當div所定義的區域的內容達到一定程度時,在div標簽里面嵌入css樣式表,定義overflow的屬性值,設置滾動條相關的屬性。

<style tyle="text/css">
.testDiv{
   border-style: solid ;     
   border-width: 50px ;    
   border-color: pink ;

   position: absolute ; /* 位置 絕對或者相對於最近的一個元素 relative absolute */
   top:200px ;
   left:300px ;
   height:200px ; /* 定義區域的高*/
   width:300px ;
  
   /*   滾動條 */
    /*   overFlow: auto ; */ /* visible :卻省的 hidden auto scroll */
         overFlow-x: scroll ;
       overFlow-y: hidden ;     
  
    /*   滾動條相關的顏色屬性 */
     scrollBar-face-color: green;        /* 滑塊 */
     scrollBar-hightLight-color: red;    /* 高亮 */
     scrollBar-3dLight-color: orange;    /* 3維光線 */
     scrollBar-darkshadow-color:blue;    /* 暗影    */
     scrollBar-shadow-color:yellow;      /* 陰影   */
     scrollBar-arrow-color:purple;       /* 箭頭 */
     scrollBar-track-color:black;         /* 滑道顏色 */
     scrollBar-base-color:pink;          /* 主要顏色 */
  
          
}

</style>

注:

1. overFlow:

visible    卻省值,沒有滾動條,根據內容自動擴撐區域的大小,即定義的區域無效
scroll     總是顯示滾動條
hidden   沒有滾動條,超出區域的內容不可見
auto       根據內容自動判斷是否添加滾動條

2.滾動條顏色屬性:

  face-color:滑塊顏色
  hightlight-color:高亮顏色
  3dlight-color:三維光線顏色
  darkshadow-color:暗影顏色
  shadow-color:陰影顏色
  arrow-color:箭頭顏色
  track-color:滑道顏色
       base-color:滾動條的主要顏色,其中包含滾動按鈕和滾動滑塊



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com