• 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. TP 查询语句中如何使用 FIND_IN_SET 这样的查询方法

    TP 查询语句中如何使用 FIND_IN_SET 这样的查询方法 $condition['_string'] = 'FIND_IN_SET('.$citys.',city)';

  2. javascript 闭包 通俗解释

    代码段 function foo(){ var a = 2; function bar(){ console.log(a); } return bar; } var baz = foo(); baz( ...

  3. Nginx如何保留真实IP和获取前端IP

    原理: squid,varnish以及nginx等,在做反向代理的时候,因为要代替客户端去访问服务器,所以,当请求包经过反向代理后,在代理服务器这里这个IP数据包的IP包头做了修改,最终后端web服务 ...

  4. Java之JVM调优案例分析与实战(3) - 堆外内存导致的溢出错误

    环境:基于B\S的点子考试系统,为了发现客户端能实时地从服务端接收考试数据,系统使用了逆向AJAX技术(也称Comet或Server Side Push),选用CometD1.1.1作为服务端推送框架 ...

  5. 数据库选型之MySQL(普通硬盘)

    刘勇   Email:lyssym@sina.com 本博客记录作者在工作与研究中所经历的点滴,一方面给自己的工作与生活留下印记,另一方面若是能对大家有所帮助,则幸甚至哉矣! 简介 鉴于高频中心库ta ...

  6. 初学者必知的Python中优雅的用法

    转自:http://python.jobbole.com/81393/    

  7. 【恢复，1】 redo 日志恢复的各种情况

    Recovering After the Loss of Online Redo Log Files If a media failure has affected the online redo l ...

  8. 在Quartus使用TCL脚本文件配制管脚 《本人亲测》

    方法一:Import Assignments步骤1: 使用记事本或类似软件新建一个txt文件(或csv文件),按如下格式编写管脚分配内容(不同的开发版,其内容也不同,本文以我使用的DIY_DE2开发板 ...

  9. freeswitch 把SIP注册信息数据库从SQLITE 改为MYSQL的方法

    实际线上应用中,在线注册人数超过4000 ,SQLITE就吃不消了,容易造成锁表,考虑转入MYSQL,查了下官网 超过转入了MYSQL. https://wiki.freeswitch.org/wik ...

  10. 使用ClipboardManager碰到Can&#39;t create handler inside thread that has not called Looper.prepare()

    直接放上我的代码.希望能给碰到相同问题的朋友提供帮助 Runnable runnable = new Runnable() { public void run() { ClipboardManager ...