.hello{
width: 400px;
height: 200px;
border: 1px solid gray;
overflow: auto;
}
.hello::-webkit-scrollbar-thumb:vertical {
background-color: #c0cedc;
border-radius: 6px;
outline: 1px solid rgba($color: #ffffff, $alpha: 0);
outline-offset: -2px;
border: 1px solid rgba($color: #ffffff, $alpha: 0);
color: #e9e9e9;
}
.hello::-webkit-scrollbar {
width: 4px;
height: 4px;
border-radius: 10px;
}
.hello::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
border-radius: 10px;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44,rgb(60,186,146)),color-stop(0.72,rgb(253,187,45)),color-stop(0.86,rgb(253,187,45)));
transition: 0.3s ease-in-out;
}
.hello::-webkit-scrollbar-track {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.son{
width: 400px;
height: 400px;
}
<div class="hello">
<div class="son"></div>
</div>
效果: