• 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. poj 2406 Power Strings KMP匹配

    对于数组s[0~n-1],计算next[0~n](多计算一位). 考虑next[n],如果t=n-next[n],如果n%t==0,则t就是问题的解,否则解为1. 这样考虑: 比方字符串"a ...

  2. apple iMac一体机 装双系统 实战！ （Apple +Win 7 64bit)

    http://group.zol.com.cn/1/641_485.html http://tieba.baidu.com/p/2532811864 http://www.jb51.net/os/82 ...

  3. 算法笔记_154:算法提高 日期计算(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 已知2011年11月11日是星期五,问YYYY年MM月DD日是星期几?注意考虑闰年的情况.尤其是逢百年不闰,逢400年闰的情况. 输入格式 ...

  4. vim 查找和替换命令 替换/n和\n

    一. 字符串的查找 1. vim 中用 / 和 ? 来查找字符串,两者的区别是: /string 会高亮显示光标后匹配的第一个字符串,回车后光标移到该字符串的第一个字母: ?string 会高亮显示光 ...

  5. JSP 九大隐式对象

    final javax.servlet.jsp.PageContext pageContext; javax.servlet.http.HttpSession session = null; fina ...

  6. ubuntu 将&quot;/TMP&quot;挂载到内存中

    一.修改"/etc/fstab"文件:        sudo gedit /etc/fstab  二.在文件中添加下列语句:   1,     # / was on /dev/s ...

  7. 列举一些常见的系统系能瓶颈 Common Bottlenecks

    http://www.nowamagic.net/librarys/veda/detail/2408在 Zen And The Art Of Scaling - A Koan And Epigram ...

  8. elipse快捷键大全 elipse快捷键详解

    1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如applic*.xm ...

  9. hibernate中对象集合的保存

    一.在java web设计中经常使用对象进行操作,在hibernate中对象集合的保存(一对多) 1需要进行如下步骤: 1) 设计数据表关系 2)引入jar包,需要注意引入数据库connector 3 ...

  10. [转]winform程序textbox滚动条保持在最下面 内容不闪烁

    在开发winform程序时,会用到textbox控件来显示信息,当把textbox的Multiline属性改为Ture时(即多行显示状态),ScrollBars属性改为Vertical(内容过多时,显 ...