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

Question

如题所述

Answer 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;

}

Answer 2

写个实例demo吧不能光说不练。CSS也很简单。

/* 设置滚动条的样式 */::-webkit-scrollbar {    width: 12px;}/* 滚动槽 */::-webkit-scrollbar-track {    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    border-radius: 10px;}/* 滚动条滑块 */::-webkit-scrollbar-thumb {    border-radius: 10px;    background: rgba(0,0,0,0.1);    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}::-webkit-scrollbar-thumb:window-inactive {    background: rgba(255,0,0,0.4);}

本回答被提问者和网友采纳

Answer 3

DIV滚动条属性及样式设置方式
给你个网址：http://developer.51cto.com/art/201009/225049.htm

scrollBar-face-color:green;
scrollBar-hightLight-color:red;
scrollBar-3dLight-color:orange;
scrollBar-darkshadow-color:blue;
scrollBar-shadow-color:yellow;
scrollBar-arrow-color:purple;
scrollBar-track-color:black;
scrollBar-base-color:pink;
对应上面如：

face-color：滑块颜色
hightlight-color：高亮颜色
3dlight-color：三维光线颜色
darkshadow-color：暗影颜色
shadow-color：阴影颜色
arrow-color：箭头颜色
track-color：滑道颜色
base-color：DIV滚动条的主要颜色，其中包含滚动按钮和滚动滑块

Answer 4

/* 设置滚动条的样式 */::-webkit-scrollbar { width: 12px;}/* 滚动槽 */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;}/* 滚动条滑块 */::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4);}

Answer 5