前端自定义滚动条

1. CSS样式

.scrollbar{
    margin-left: 30px;
    float: left;
    height: 300px;
    width: 65px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}
#style-2::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar{
    width: 16px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb{
    background-color: #0ae;
    background-image: -webkit-gradient(linear, 0 0, 0 100%,
    color-stop(.5, rgba(255, 255, 255, .2)),
    color-stop(.5, transparent), to(transparent));
}

 2. html标签

<div class="scrollbar" id="style-2">
    <div class="">xxxx</div>
</div>

3. 运行结果

  

 

参考文献：HTML滚动条设置 - 悬剑丶 - 博客园