css自定义滚动条样式

要实现一个自定义的滚动条样式，例如下图

 

 在webkit中实现，需要滚动条的div加上class='section'即可

 /* 滚动条宽度 */
   .section::-webkit-scrollbar {
        width: 10px;
    }
    /* track滚动条未覆盖区域 */
    .section::-webkit-scrollbar-track {
        background-color: #e4e4e4;
        border-radius: 100px;
    }
    /* thumb滚动条覆盖区域 */
    .section::-webkit-scrollbar-thumb {
        background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%);
        
        border-radius: 100px;
    }
    .section {
        overflow-y: auto;
    }