css给一个内容盒子设置overflow:auto,当盒子里面的内容超过盒子的宽高时,会自动出现滚动条:
这种滚动条在一些页面美观要求较高的网页上会显得很突兀,下面来修改滚动条的样式吧~
::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.test {
width: 200px;
height: 200px;
overflow: auto;
margin: 5px;
border: none;
background-color: #f2f2f2;
margin: 200px auto;
}
.test-1::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #535353;
}
.test-1::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #EDEDED;
}
</style>
</head>
<body>
<div class="test test-1">
<p>文字文字文字文字文字文字文字</p>
<p>文字文字文字文字文字文字文字</p>
<p>文字文字文字文字文字文字文字</p>
<p>文字文字文字文字文字文字文字</p>
<p>文字文字文字文字文字文字文字</p>
<p>文字文字文字文字文字文字文字</p>
<p>文字文字文字文字文字文字文字</p>
<p>文字文字文字文字文字文字文字</p>
<p>文字文字文字文字文字文字文字</p>
</div>
</body>
</html>