13518219792
目前只有chrome支持设置滚动条样式，给div设置伪类
成都创新互联公司长期为1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为内江企业提供专业的成都做网站、网站制作，内江网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
如div::-webkit-scrollbar{
width:4px
}
/*IE滚动条颜色设置*/
body {
scrollbar-arrow-color:#f2f2f3; /*上下箭头*/
scrollbar-track-color:#1589ce; /*底层背景色*/
scrollbar-face-color:#27aeff; /*滚动条前景色*/
scrollbar-Shadow-color:#1589ce; /*滚动条边线色*/
}
/*chrome滚动条颜色设置*/
body::-webkit-scrollbar {width:10px; height:10px; background-color:transparent;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
body::-webkit-scrollbar-track {background-color:#ccc; border-radius:10px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);} /*定义滚动条轨道 内阴影+圆角*/
body::-webkit-scrollbar-thumb {background-color:#555; border-radius:10px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);} /*定义滑块 内阴影+圆角*/
改变浏览器默认的滚动条样式：
//滚动条凹槽的颜色，还可以设置边框属性
::-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;
}
css可以通过为网页元素设置滚动条样式使网页元素的内容实现滚动。
css通过overflow属性设置滚动条示例：
html
head
style type="text/css"
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;
}
/style
/head
body
p如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。/p
div
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，
用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
/div
/body
/html
效果图
扩展：
overflow属性介绍：
overflow 属性规定当内容溢出元素框时发生的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
属性值：
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
