• 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. IOS8 Playground介绍

    一.Playground介绍 Playground是Xcode6中自带的Swift代码开发环境.俗话说"功欲善其事,必先利其器".曾经在Xcode5中编写脚本代码,比如编写JS,其 ...

  2. C++(一)——HelloWorld

    之前学C.学Python,学的比較多的是Java,作为大家口中更强大的C++,要学学,这次的话,以了解主要的特性和做个小游戏作为目标吧. 1)HelloWorld Eclipse执行C++之Launc ...

  3. js经常使用功能代码

    js经常使用功能代码(持续更新): 1---折叠与展开 <input id="btnDisplay" type="button" class=" ...

  4. PHP LDAP class for Active Directory

    A class for PHP to talk to Active Directory through LDAP.http://sourceforge.net/projects/adldap/

  5. 从P1到P7——我在淘宝这7年 - 子柳撰写

    http://kb.cnblogs.com/page/132752/来自博客园的整理版本,作者是子柳,博客地址:http://blog.sina.com.cn/calvinzhaoc (一) 2011 ...

  6. 在Cocos2d-X中使用xml

    XML就可以扩展标记语言.在游戏开发中,经常使用于保存游戏信息,如最高分,游戏等级.等信息,和描写叙述一些资源等,我第一次使用xml是在使用CCAnimation创建动画中,使用plist文件载入动画 ...

  7. win10 配置 python3 + opencv3.2 + VideoCapture

    最近需要在 win10 上进行图片处理,使用深度学习框架 tensorflow ,所以安装了python3.5 + opencv3.2 + tensorflow + VideoCapture + PI ...

  8. EasyUI combobox的panelHeight自动高度

    在使用EasyUI的时候,有时会用到combobox组件,这里的记录数不是很固定,设置为auto可能会被挡住,设置固定高度时,option很少时,也很丑 所以这里给出我自己自动调整combobox的p ...

  9. Spring Cloud(五)：熔断监控Hystrix Dashboard和Turbine

    Hystrix-dashboard是一款针对Hystrix进行实时监控的工具,通过Hystrix Dashboard我们可以在直观地看到各Hystrix Command的请求响应时间, 请求成功率等数 ...

  10. Release Management

    1. Understand the current state of release management. test environment limitations how long to setu ...