效果圖

image.png

css代碼

<style>
    ::v-deep ::-webkit-scrollbar {
        // 滾動條整體樣式
        display: block;
        width: 10rpx !important;
        height: 10rpx !important;
        -webkit-appearance: auto !important;
        background: transparent;
        overflow: auto !important;
    }
     
    ::v-deep ::-webkit-scrollbar-thumb {
        // 滾動條里面小方塊
        border-radius: 10rpx !important;
        box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
        background-color: #f7f7f7 !important;
    }
     
    ::v-deep ::-webkit-scrollbar-track {
        // 滾動條
        border-radius: 10rpx !important;
        box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
        background-color: #7f7f7f !important;
    }
</style>