首页 > 前端特效js代码大全 > css滚动条样式代码|div滚动条样式代码

css滚动条样式代码|div滚动条样式代码

发布-网页培训班 | 浏览量-

 

1,Overflow内容溢出时的设置

overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的值为visible、scroll、hidden、auto

visible 默认值。使用该值时,无论设置的"width"和"height"

的值是多少,其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内

容都会不可见。
scroll 无论内容是否超越范围,都将显示滚动条。
auto 当内容超出范围时,显示滚动条,否则不显示。

应用:

没有水平滚动条:
<div style="overflow-x:hidden">test</div>

没有垂直滚动条
<div style="overflow-y:hidden">test</div>


没有滚动条
<div style="overflow-x:hidden;overflow-y:hidden" 或style="overflow:hidden">test</div>

自动显示滚动条
<div style="height:100px;width:100px;overflow:auto;">test</div>

2,自己定义滚动条的颜色

我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样

子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,

分别注释在下面的css代码的后面了,注意css的注释代码是放在

两个斜杠内的两个星号之间,如:/*这里放注释的代码*/

Body {
scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/
scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜

色*/
scrollbar-highlight-color: #666; /*图2,滚动条空白部分的

颜色*/
scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜

色*/
scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴

影的颜色*/
scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/

scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
}

以上2项适用与<body>、<div>、<textarea>、<iframe>

 

 

3.属性设置: WIDTH: 148;HEIGHT: 146; 根据使用的位置,可调整宽度和高度.

OVERFLOW: scroll; 显示纵横滚动条.上部的演示均属设置为scroll的界面. 但一般都设置为:auto(需要时才显示)

BACKGROUND-COLOR: transparent;

滚动框内部背景颜色.transparent为透明色.其他可使用颜色代码.

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-color:#ffffff">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; SCROLLBAR-FACE-COLOR: EAECEC; SCROLLBAR-HIGHLIGHT-COLOR: EAECEC; SCROLLBAR-SHADOW-COLOR: BLACK; SCROLLBAR-3DLIGHT-COLOR: EAECEC; SCROLLBAR-ARROW-COLOR: EAECEC; SCROLLBAR-TRACK-COLOR: FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: EAECEC">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CFCFCF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#595959">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #D2E5F4; scrollbar-highlight-color: #D2E5F4; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D2E5F4">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #FFC300; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFC300; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFC300">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:5A5227; scrollbar-arrow-color:FFF8C5; scrollbar-base-color:DDD38D; scrollbar-darkshadow-color:FFF8C5; scrollbar-face-color:DDD38D; scrollbar-highlight-color:FFF8C5; scrollbar-shadow-color:5A5227">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #DB52BC; scrollbar-shadow-color: #E994D6; scrollbar-highlight-color: #E994D6; scrollbar-3dlight-color: #DB52BC; scrollbar-darkshadow-color: #DB52BC; scrollbar-track-color: #E994D6; scrollbar-arrow-color: #FFFFFF">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #333333; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #101010; scrollbar-darkshadow-color: #070707; scrollbar-track-color: #101010; scrollbar-arrow-color: #000000">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#FFC4E1; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FF95CA; scrollbar-darkshadow-color:#FFB5DA; scrollbar-shadow-color:#FF6AB5; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFDDEE">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #DBEBFE; scrollbar-darkshadow-color:#458CE4; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #458CE4">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar-highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color: #F8ECD8; scrollbar-track-color: #F8ECD8; scrollbar-arrow-color: #885C10">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#CCFF00; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#CCFF00; scrollbar-face-color:#CCFF00; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF">
这里输入内容
</div>

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

①DIV:未设置宽度、高度、溢出;溢出默认为可见,宽度和高度自动调整
 
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

②DIV:设置宽度、高度,未设置溢出;溢出默认为可见,高度设置无效并自动调整
③DIV:设置宽度、高度,溢出为滚动;始终显示滚动条
④DIV:设置宽度、高度,溢出为自动;根据内容多少决定是否显示滚动条
 
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑤DIV:设置宽度、高度,溢出为自动,假透明滚动条样式1;根据内容多少决定是否显示滚动条,利用颜色实现假透明效果1,适用于文字
⑥Table/DIV:设置宽度、高度,溢出为自动,背景图片、假透明滚动条样式1;根据内容多少决定是否显示滚动条,利用颜色实现假透明效果1,不适用于背景图片
⑦Table/DIV:设置宽度、高度,溢出为自动,背景图片、真透明滚动条样式1;根据内容多少决定是否显示滚动条,利用滤镜实现真透明效果1,适用于文字和背景图片
 
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑧DIV:设置宽度、高度,溢出为自动,假透明滚动条样式2;根据内容多少决定是否显示滚动条,利用颜色实现假透明效果2,适用于文字
⑨Table/DIV:设置宽度、高度,溢出为自动,背景图片、假透明滚动条样式2;根据内容多少决定是否显示滚动条,利用颜色实现假透明效果2,不适用于背景图片
⑩Table/DIV:设置宽度、高度,溢出为自动,背景图片、真透明滚动条样式2;根据内容多少决定是否显示滚动条,利用滤镜实现真透明效果2,适用于文字和背景图片
 
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑾DIV:增加“word-break:keep-all;”属性,即可实现横向滚动条。
⑿DIV/DIV:嵌入另外一个DIV,并且对他们设置“DIRECTION”属性,即可实现左侧滚动条。

csshack大全  

 table 边框样式

css翻页代码

原文地址:http://www.35ui.cn/post/20120206866.html

标签css滚动条样式滚动条样式div滚动条

上一条: 网线水晶头接法大全
下一条: 搜索引擎的特殊用法

或许你还对下面的文章感兴趣
  • 作品
  • 素材
  • ued
  • 资源
  • 前端工程师
  • Asp网页培训班
  • jquery培训班
  • 北京网站制作
  • logo设计培训班
  • 做网站常用代码