.parent{
width: 200px;
height: 100px;
overflow: auto;
float: left;
margin: 5px;
border: none;
}
.scrollbar{
width: 300px;
height: 200px;
margin: 0 auto;
}
.myScrollbar::-webkit-scrollbar {
width: 5px; /*滚动条样式 宽高*/
height: 5px;
}
.myScrollbar::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #D6D9DA; /*滚动条块颜色*/
}
.myScrollbar::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #FFF;/*轨道颜色*/
}
<div class="parent myScrollbar">
<div class="scrollbar">这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!这是一个滚动条!!!!</div>
</div>
在线调试 : https://c.runoob.com/codedemo/5428