• 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. Python list替换元素

    替换直接对应位置赋值 假设现在班里仍然是3名同学: >>> L = ['Adam', 'Lisa', 'Bart'] 现在,Bart同学要转学走了,碰巧来了一个Paul同学,要更新班 ...

  2. ES6 class 基本使用

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. 干货首发，能够清理，带动画的自己定义控件CuteEditText

    转载请注明出处:王亟亟的大牛之路 总想创造个什么,可是又不知道要详细做什么. 那么仅仅有丛一直用的那些东西上面開始创造,哈哈.然后再摸索的过程中进步吧. 先上一下效果: 这样的带删除button的形式 ...

  4. Session 简单购物车

    package session.test; import java.io.IOException; import java.io.PrintWriter; import java.util.Linke ...

  5. QueryRunner 结果处理器

    package cn.itcast.dbutil; import java.sql.SQLException; import java.util.List; import java.util.Map; ...

  6. laravel-v5.1数据库连接文件是.env文件

  7. 转 redis使用场景 简介

    Redis实战(五) 聊聊Redis使用场景 发表于 2016-11-21 | 数据存储 | Redis 文章目录 1. 使用场景说明 1.1. 计数器 1.2. 排行榜 1.3. 用于存储时间戳 1 ...

  8. GOF对Builder模式的定义（转载）

    (1)意图 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. (2)适用性 1. 当创建复杂对象的算法应该独立于该对象的组成部分以及他们的装配方式:2. 当构造过程必须允许构 ...

  9. php图片采集后按原路径保存图片

    php图片采集后按原路径保存图片. 代码: <?php $domain ='http://www.jbxue.com'; $url = '/newskin/images/v4/logo.jpg' ...

  10. LPC（Low Pin Count） 与SIO（Super IO）

    记录bios学习的点点滴滴,虽然已经学了很长时间才发出来,但就当是温故而知新吧,由于水平有限,难免存在错误,望指正,同时感谢CSDN提供的平台. 1.LPC 定义:​ Intel所定义的PC接口,将以 ...