<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修改滚动条</title>
<style type="text/css">
.box{
width: 300px;
height: 400px;
overflow-y: auto;
}
/* 滚动条轨道的宽度 高度是根据内容多少自适应 */
.box::-webkit-scrollbar{
width: 10px;
}
/* 滚动条轨道的设置 */
.box::-webkit-scrollbar-track{
background: rgba(0,0,0,0.2);
border-radius: 10px;
}
/* 滚动条中的滑块设置 */
.box::-webkit-scrollbar-thumb{
background: #007AFF;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box">
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
我是文字内容,我是文字内容,
</div>
</body>
</html>
css修改滚动条
最新推荐文章于 2024-07-03 14:39:37 发布