其他分享
首页 > 其他分享> > css自定义滚动条样式

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;
    }

 

标签:自定义,section,100px,滚动条,scrollbar,webkit,css
来源: https://www.cnblogs.com/lijun12138/p/16443233.html