css怎样设置滚动条的颜色及样式

html-css015

css怎样设置滚动条的颜色及样式,第1张

改变浏览器默认的滚动条样式:

//滚动条凹槽的颜色,还可以设置边框属性

::-webkit-scrollbar-track-piece {

background-color:#f8f8f8 

}

//滚动条的宽度

::-webkit-scrollbar {

width:9px

height:9px

}

//滚动条的设置

::-webkit-scrollbar-thumb {

background-color:#dddddd

background-clip:padding-box

min-height:28px

}

::-webkit-scrollbar-thumb:hover {

background-color:#bbb

}

扩展资料:

给某个div,class为test1加滚动条样式:

.test1::-webkit-scrollbar {

width: 8px

}

.test1::-webkit-scrollbar-track {

background-color:red

-webkit-border-radius: 2em

-moz-border-radius: 2em

border-radius:2em

}

.test1::-webkit-scrollbar-thumb {

background-color:green

-webkit-border-radius: 2em

-moz-border-radius: 2em

border-radius:2em

}

首先overflow:scoll的意思是当页面内容超出一屏(或者你给body设置的宽度)时显示滚动条的意思。

当没有超出时,当然只有X和Y的轴。

问题出在,背景图片不能设置大小。HTML不会计算出背景图片的大小,这和直接插入的图片是有区别的。

解决办法

1.把body的宽度和高度,和图片真实大小设置为一致。

2.就像你说的body里包的一个div,你给那个div设置的宽度和高度和图片一致即可。

另外题外补充,overflow还有两个其它参数。只显示Y轴或者X轴。不会overflow的使用在IE和FF中是有明显差异的。

如果仍没解决,百度Hi或者站内消息可以找到我

以下是各个属性的解释,对照着看吧,都是css样式。

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

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

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

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

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

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

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

SCROLLBAR-BASE-COLOR: //滚动条的基本颜色