vue3设置全局滚动条样式

vue3设置全局滚动条样式

关键代码

::-webkit-scrollbar-thumb {
    background: #189cf1;
    background-clip: padding-box;
    min-height: 10px;
    border-radius: 5px;
}

::-webkit-scrollbar {
    width: 3px;
    height: 1px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2.5px rgba(20, 20, 20, 0.1);
    background-color: rgba(7, 36, 77, 0.5);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #189cf1;
}

配置方法：
src下/style/index.css填写上述代码

找到main.js文件引入上述全局css文件

import "@/style/index.css"; // global css