前端使用height和overflow设置滚动条的样式修改
html:
<div class="baba">
<div class="haha">2222</div>
</div>
css:
.haha {
width: 700px;
overflow: auto;
height: 800px;
background-color: red;
}
.baba {
height: 500px;
width: 300px;
overflow: auto;
background-color: green;
}
// 滚动条
.baba::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 10px;
}
.baba::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #0f0;
}
.baba::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #ffffff;
}
结果: