自定义滚动条样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.box{width:300px;height:300px;overflow-y:auto;background:gray;color:#fff;padding:10px;}
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
width: 12px;
height: 20px;
background:rgba(150,150,150,0.2)
}
/*定义滚动条的轨道，内阴影及圆角*/
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);
background-color: #f5f5f5;
}
/*定义滑块，内阴影及圆角*/
::-webkit-scrollbar-thumb{
/*width: 10px;*/
height: 12px;
border-radius: 50px;
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);
background:rgba(10,10,10,.2)
}
</style>
<body>
<div class="box">
定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸
定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸
定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸
定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸
定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸
定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸
定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸
定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸
定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸
定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸
定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸
</div>
</body>
</html>
当前页面是本站的「Baidu MIP」版。查看和发表评论请点击：完整版 »
因本文不是用Markdown格式的编辑器书写的，转换的页面可能不符合MIP标准。