• overflow            内容溢出时的设置（设定被设定对象是否显示滚动条）
  • overflow-x         水平方向内容溢出时的设置
  • overflow-y         垂直方向内容溢出时的设置

以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

  • 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"> http://www.o.com

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>
  • Scrollbar-Face-Color          为滚动条表面颜色设定；
  • Scrollbar-Highlight-Color    为滚动条上斜面和左斜面颜色设定；
  • Scrollbar-Shadow-Color     为滚动条下斜面和右斜面颜色设定；
  • Scrollbar-3Dlight-Color      为滚动条上边和左边的边沿颜色设定；
  • Scrollbar-Arrow-Color        为滚动条两端箭头颜色设定。
  • Scrollbar-Track-Color         为滚动条底板颜色设定；
  • Scrollbar-Darkshadow        为滚动条下边和右边边沿颜色设定。

举例：

body {

background-color: #ffffff;

color: #336699;

SCROLLBAR-FACE-COLOR: #BED8EB;

SCROLLBAR-SHADOW-COLOR: #DDF8FF;

SCROLLBAR-HIGHLIGHT-COLOR: #92C0D1;

SCROLLBAR-3DLIGHT-COLOR: #DDF8FF;

SCROLLBAR-DARKSHADOW-COLOR: #92C0D1;

SCROLLBAR-TRACK-COLOR:#BED8EB;

SCROLLBAR-ARROW-COLOR: #92C0D1

}

说明：滚动条必须和div的height配合使用，如果div未设置height，则滚动条属性设置会失效

CSS：scrollbar的属性及样式分类的更多相关文章

  1. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  2. JQuery操作属性、样式、风格(attr、class、css)

    样式操作 <p class="myclass" title="选择喜欢的水果">你最喜欢的水果是?</p> 在上面代码中,class也是 ...

  3. 如何利用 jQuery 修改 css 中带有 !important 的样式属性？

    使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...

  4. jQuery的属性与样式之样式操作.css()

    .css() 方法:获取元素样式属性的计算值或者设置元素的CSS属性 获取: .css( propertyName ) :获取匹配元素集合中的第一个元素的样式属性的计算值 .css( property ...

  5. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  6. css中 font常用的样式属性

    今天我总结一下文本常用的字体样式 1.font常用样式 1)字体类型 语法:font-family: +字体类型:    如: font-family:宋体; 2)字体大小 语法:font-size: ...

  7. CSS的常用属性

    刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...

  8. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  9. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

随机推荐

  1. 通过micrometer实时监控线程池的各项指标

    通过micrometer实时监控线程池的各项指标 前提 最近的一个项目中涉及到文件上传和下载,使用到JUC的线程池ThreadPoolExecutor,在生产环境中出现了某些时刻线程池满负载运作,由于 ...

  2. Jquery重新学习之八[Ajax运用总结B]

    上一篇简单介绍普通javascript以及Jquery的AJAX方法,其中Jquery.ajax()是功能比较强悍的底层方法,可以更多地关注实现过程中的细节:除Jquery.ajax()方法外,Jqu ...

  3. spring mvc相关问题

    1: 基于注解的SpringMVC简单介绍 2: spring组件扫描<context:component-scan/>使用详解 3: springMvc 注解配置例子

  4. VLC命令行参数详解

    VLC命令行参数详解 2012-11-29 14:00 6859人阅读 评论(0) 收藏 举报 Usage: vlc [options] [stream] ...You can specify mul ...

  5. 用C语言实现循环左移和循环右移

    有天重建一段代码时,遇到了循环右移指令,不知道用C语言怎么实现,后来得到小伟指点,感谢.. me 15:56:38004BD2C9 8B55 F8 MOV EDX,DWORD PTR SS:[EBP- ...

  6. shell中的find和xargs详细解析

  7. WebSocket的几个模块(node.js)(未完)

    1.ws模块 npm install ws 2.nodejs-websocket npm nodejs-websocket 3.socket.io模块 npm install socket.io

  8. Objective-C函数重载规则

    是按照函数标签是否重复来判断是否为一个重载函数的.

  9. CA证书的信认

    为什么不同的品牌证书,价钱不一样: 衡量证书一般是看通用型,就是大家认不认你,或者说,你买的证书的根证书有没有被设备内置,内置了,你就是可信的, 没内置,就没法用.

  10. wget镜像网站并且下载到指定目录 2012-06-20 19:40:56

    wget镜像网站并且下载到指定目录 2012-06-20 19:40:56 分类: Python/Ruby wget -r -p -np -k -P /tmp/ap http://www.exampl ...