关闭

自定义BODY滚动条

标签: scroll浏览器classdivie
6048人阅读 评论(0) 收藏 举报
分类:

1)

body,   div  
  {  
      SCROLLBAR-HIGHLIGHT-COLOR:   #FFFFFF;   /*滚动条及箭头的亮边色*/  
      SCROLLBAR-SHADOW-COLOR:   #E1E1E1;         /*滚动条及箭头的暗边色*/  
      SCROLLBAR-3DLIGHT-COLOR:   #E1E1E1;       /*滚动条及箭头的3D亮边色*/  
      SCROLLBAR-TRACK-COLOR:   #E1EDFD;           /*滚动条底色*/  
      SCROLLBAR-DARKSHADOW-COLOR:#FFFFFF;   /*滚动条及箭头的暗边阴影色*/  
      SCROLLBAR-BASE-COLOR:   #9BBBF4;             /*滚动条的基本颜色*/  
      SCROLLBAR-ARROW-COLOR:   #35507A;           /*箭头的颜色*/  
      SCROLLBAR-FACE-COLOR:   #9BBBF4;             /*滚动条及箭头的颜色*/  
  }

2)

(某些样式需ie5.5+才能支持):  
   
  1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)  
  overflow-x水平方向内容溢出时的设置  
  overflow-y垂直方向内容溢出时的设置  
  以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。  
   
  2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)  
  scrollbar-arrow-color上下按钮上三角箭头的颜色  
  scrollbar-base-color滚动条的基本颜色  
  scrollbar-dark-shadow-color立体滚动条强阴影的颜色  
  scrollbar-face-color立体滚动条凸出部分的颜色  
  scrollbar-highlight-color滚动条空白部分的颜色  
  scrollbar-shadow-color立体滚动条阴影的颜色  
   
  我们通过几个实例来讲解上述的样式属性:  
  1.让浏览器窗口永远都不出现滚动条  
  没有水平滚动条  
  <body   style="overflow-x:hidden">  
  没有垂直滚动条  
  <body   style="overflow-y:hidden">  
  没有滚动条  
  <body   style="overflow-x:hidden;overflow-y:hidden">或<body    
  style="overflow:hidden">  
   
  2.设定多行文本框的滚动条  
   
  没有水平滚动条  
  <textarea   style="overflow-x:hidden"></textarea>  
   
  没有垂直滚动条  
  <textarea   style="overflow-y:hidden"></textarea>  
   
  没有滚动条  
  <textarea   style="overflow-x:hidden;overflow-y:hidden"></textarea>  
  或<textarea   style="overflow:hidden"></textarea>  
   
  3.设定窗口滚动条的颜色  
  设置窗口滚动条的颜色为红色<body   style="scrollbar-base-color:red">  
  scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。  
  加上一点特别的效果:  
  <body   style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">  
   
  4.在样式表文件中定义好一个类,调用样式表。  
  <style>  
  .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}  
  </style>  
  这样调用:  
  <textarea   class="coolscrollbar"></textarea>   
   
3)

在你的<head>..</head>部分加如下语句即可:  
  <style>  
  BODY   {  
  FONT-FAMILY:   "宋体";   FONT-SIZE:   9pt;   SCROLLBAR-FACE-COLOR:   #E8E8E8;   SCROLLBAR-HIGHLIGHT-COLOR:   #D96405;   SCROLLBAR-SHADOW-COLOR:   #D96405;   SCROLLBAR-3DLIGHT-COLOR:   #eeeeee;   SCROLLBAR-ARROW-COLOR:   #D96405;   SCROLLBAR-TRACK-COLOR:   #eeeeee;   SCROLLBAR-DARKSHADOW-COLOR:   #eeeeee  
  }  
  </style>  

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:120999次
    • 积分:1873
    • 等级:
    • 排名:千里之外
    • 原创:51篇
    • 转载:57篇
    • 译文:0篇
    • 评论:5条
    最新评论