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

 

原创文章,作者:1402239773,如若转载,请注明出处:https://blog.ytso.com/271478.html

(0)
上一篇 2022年7月4日
下一篇 2022年7月4日

相关推荐

发表回复

登录后才能评论