自定义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>  

 

html滚动条使用,以及页面有多个div块,如何让body页面不使用滚动条,只在某个div内使用滚动条

滚动条基本知识: 建议比价华丽的页面使用overflow:scroll这个样式的滚动条,比较好看。 scrollbar属性、样式详解 1. overflow内容溢出时的设置(设定被设定对象是否显示滚...
  • csdnliuxin123524
  • csdnliuxin123524
  • 2017年11月29日 15:42
  • 252

CSS3自定义滚动条样式 -webkit-scrollbar

有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢? ...
  • yzbben
  • yzbben
  • 2017年03月10日 16:11
  • 558

Jquery实现自定义滚动条,DIV滑动效果

浏览器自带的滚动条一般都不符合我们的需求(因为不好看,太丑,还不能改!),网上搜了一下,发现有很多用js或者jquery实现的自定义的滚动条,而且样式都很漂亮。比如说这个: http://manos....
  • csmzl
  • csmzl
  • 2016年10月21日 09:40
  • 1631

用绝对定位实现无滚动条的全屏滚动

有滚动条的全屏滚动 /* 用通配符清除默认样式减少代码量,实际项目应对用到的标签清除默认样式 */ *{margin:0;padding:0;list-sty...
  • Tyro_java
  • Tyro_java
  • 2016年01月10日 14:06
  • 1308

IE下点击scrollbar会导致焦点移动到body

现象 IE这货果然与众不同,当光标焦点在input时,点击同页面内其他区域的scrollbar,会导致焦点移动到body,从而触发绑定在input上的blur事件,如果input中的值与之前不同,...
  • dyllove98
  • dyllove98
  • 2013年06月18日 21:26
  • 1802

js实现一个自定义的滚动条

div模拟的自定义滚动条 * { margin: 0; padding: 0
  • baidu_34157788
  • baidu_34157788
  • 2016年08月23日 10:39
  • 348

JS-自定义滚动条的几个实例

首先要说的就是:怎么实现一个自定义的滚动条 主要步骤: 1. 定义两个div,一大一小,让小div在大div上滚动 2. 利用拖拽原理使小div可以滚动,这里拖拽的时候,只是改变小div的l...
  • u014205965
  • u014205965
  • 2015年05月25日 18:41
  • 1889

各浏览器中自定义滚动条的样式

webkit浏览器css设置滚动条: 1 2 3 4 5 6 7 ::-webkit-scrollbar ...
  • wangpf1992
  • wangpf1992
  • 2016年11月09日 16:39
  • 3840

html判断滚动条是否到达底部

Insert title here /** * 判断滚动条是否到最底端的方法 * @param Element obj */ fu...
  • itlqi
  • itlqi
  • 2015年07月04日 23:10
  • 1907

自定义控件滚动条操作(一)

一.说明 当你的窗口范围比要显示的内容的范围小的时候, 就可以使用滚动条了. 1.1 这是控件的大小(GetClientRect函数可获得)   1.2 内容需要显示的范围   1...
  • cay22
  • cay22
  • 2014年05月04日 21:06
  • 1779
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义BODY滚动条
举报原因:
原因补充:

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