css自定义简约滚动条

应用场景

日常开发中，浏览器默认的滚动条样式通常与我们开发项目风格样式不够统一。我们可以通过自定义滚动条样式实现风格统一。

css样式

<style>
        /* 滚动条 */
        .container::-webkit-scrollbar {
            width: 8px;
        }
        /* 滚动条滚动区域（轨道） */
        .container::-webkit-scrollbar-track {
            background: rgb(299,299,299);
            border-radius: 4px;
        }
        /* 滚动条可拖拽部分:默认 */
        .container::-webkit-scrollbar-thumb {
            background: rgb(205,205,205);
            border-radius: 4px;
        }
        /* 滚动条可拖拽部分:鼠标悬浮 */
        .container::-webkit-scrollbar-thumb:hover {
            background: rgb(180,180,180);
            border-radius: 4px;
        }
        /* 滚动条可拖拽部分:鼠标选中 */
        .container::-webkit-scrollbar-thumb:active {
            background: rgb(180,180,180);
            border-radius: 4px;
        }
</style>    

界面展示