用css怎么设置div滚动条的样式，可改变大小的

滚动条样式主要涉及到如下CSS属性：overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容

成都创新互联公司10多年成都企业网站定制服务;为您提供网站建设,网站制作,网页设计及高端网站定制服务,成都企业网站定制及推广,对门帘等多个方面拥有丰富的营销推广经验的网站建设公司。

overflow: auto; 在需要时内容会自动添加滚动条

overflow: scroll; 总是显示滚动条

overflow-x: hidden; 禁止横向的滚动条

overflow-y: scroll; 总是显示纵向滚动条width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]height: 120px; 设置区域的高度[像素/百分比等等]STYLE

BODY {

SCROLLBAR-FACE-COLOR: #f892cc;

SCROLLBAR-HIGHLIGHT-COLOR: #f256c6;

SCROLLBAR-SHADOW-COLOR: #fd76c2;

SCROLLBAR-3DLIGHT-COLOR: #fd76c2;

SCROLLBAR-ARROW-COLOR: #fd76c2;

SCROLLBAR-TRACK-COLOR: #fd76c2;

SCROLLBAR-DARKSHADOW-COLOR: #f629b9;

SCROLLBAR-BASE-COLOR: #e9cfe0

}

/STYLESCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色

SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色

SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色

SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色

SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色

SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色

SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色

SCROLLBAR-BASE-COLOR: 滚动条的基本颜色自己定义滚动条的颜色。一般默认的滚动条样式如下左图,右图是放大了1600倍的样子，我们可以看到滚动条有几种言责组合的,我给他们标了7个号，分别注释在下面的css代码的后面了，注意css的注释代码是放在两个斜杠内的两个星号之间。如:/*这里放注释的代码*/Body {

scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/

scrollbar-face-color: #333; /*立体滚动条的颜色*/

scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/

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

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

scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/

scrollbar-track-color: #666; /*立体滚动条背景颜色*/scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/

Cursor:url(mouse.cur); /*自定义个性鼠标*/

}以上2项适用与body、div、textarea、iframe希望对你有所帮助。

怎么用css设置火狐浏览器默认滚动条样式

scrollbar-3d-light-color 设置或检索滚动条亮边框颜色

scrollbar-highlight-color 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色

scrollbar-face-color 设置或检索滚动条3D表面（ThreedFace）的颜色

scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色

scrollbar-shadow-color 设置或检索滚动条3D界面的暗边（ThreedShadow）颜色

scrollbar-dark-shadow-color 设置或检索滚动条暗边框（ThreedDarkShadow）颜色

scrollbar-base-color 设置或检索滚动条基准颜色。其它界面颜色将据此自动调整

如何用css控制浏览器滚动条

用CSS控制滚动条样式

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

火狐支持滚动条样式调整么?

您好！很高兴为您答疑。

不可以，火狐浏览器未开放针对滚动条样式的设定。且也不支持css代码关于这些浏览器属性的控制，请知晓。

如果对我们的回答存在任何疑问，欢迎继续问询。

文章名称：css火狐滚动条样式,css滚动条的样式
转载注明：http://kswjz.com/article/dsdgooj.html