css修改容器滚动条样式

HTML结构

<div class="notice">
            <p class="notice-item" v-for="(item, index) in noticeList" :key="index">
                <span class="text-color-whitee">[{{ item.time }}]</span>
                <span class="text-color-blue">{{ item.content }}</span>
            </p>
        </div>

css部分

<style>
.notice {
    height: 41px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 19px;

    
}
.notice ::-webkit-scrollbar {
        width: 4px;
    }

    .notice::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 255, 255, 1);
    }

    .notice::-webkit-scrollbar-track {
        border-radius: 0;
        background: #104681;
    }

    .notice-item {
        width: 100%;
        overflow: hidden;
        font-size: 12px;
        margin-bottom: 10px;
    }
</style>

效果：