设置滚动条的样式

<div class="scroll scroll-custom-scrollbar">
   <div class="scroll-content">
         自定义滚动条
    </div>
</div>

<style scoped>
.scroll {
    overflow: auto;
    display: inline-block;
    background-color: #999999;
    height: 200px;
    width: 180px;
}
.scroll-content {
    padding: 20px;
    height: 500px;
}
/* 设置滚动条轨道的样式 */
.scroll-custom-scrollbar::-webkit-scrollbar {
    width: 12px;
    background-color: #0e59ee;
}

.scroll-custom-scrollbar::-webkit-scrollbar-track {
    border-radius: 3px;
    background-color: transparent;
}
/* 设置滚动条的样式 */
.scroll-custom-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #ffbf00;
    border: 2px solid #eff1f5
}
</style>

修改全局的滚动条样式

/* 全局样式，作用于所有滚动条 */
::-webkit-scrollbar {
  width: 10px; /* 垂直滚动条的宽度 */
  height: 10px; /* 水平滚动条的高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道颜色 */
  //border-radius: 5px 5px 0 0;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #c1c1c1; /* 滑块颜色 */
  border-radius: 5px;
}

/* 滑块hover效果 */
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8; /* 滑块hover颜色 */
}
/* 去掉滚动条交叉出的白块 */
::-webkit-scrollbar-corner{
  background: #f1f1f1;
}