自定义BODY滚动条

原创 2006年05月23日 16:04:00

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>  

 

相关文章推荐

JQUERY插件之自定义滚动条DEMO

  • 2014年09月18日 09:47
  • 112KB
  • 下载

自定义滚动条

  • 2014年03月14日 11:28
  • 42KB
  • 下载

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法 系统默认的滚动条样式,真的已经看的够恶心了。试想一下,如果在一个很有特色和创意的网...
  • cdnight
  • cdnight
  • 2014年11月21日 17:04
  • 34141

Android 自定义横向滚动条

  • 2015年10月06日 09:56
  • 946KB
  • 下载

自定义IE浏览器滚动条样式

自定义IE浏览器滚动条样式 原文地址:http://www.cnblogs.com/koleyang/p/5484922.html 追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像...

自定义滚动条

  • 2013年02月01日 10:39
  • 2KB
  • 下载

自定义滚动条

  • 2017年08月01日 21:17
  • 4KB
  • 下载

QT中QListView中放置自定义控件并添加滚动条

转载 http://zhouzhenren163.blog.163.com/blog/static/6549928120140605729334/  效果如下图所示: 代码如下: unt...

js实现自定义滚动条

  • 2013年06月02日 16:23
  • 4KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义BODY滚动条
举报原因:
原因补充:

(最多只允许输入30个字)