实现效果

自带的滚动条只有当鼠标移上去的时候才会显示，其他时候隐藏，这样用户很难看出这个是能划动的，这就需要滚动条一直显示在页面上

代码实现

先把原来的隐藏，再重新写自定义的样式

ul{
    height: 260px;
    overflow-y: scroll;
    overflow-x: hidden;
}

ul::-webkit-scrollbar { 
    /* 隐藏默认的滚动条 */
    -webkit-appearance: none;
}

ul::-webkit-scrollbar:vertical { 
    /* 设置垂直滚动条宽度 */
    width: 2px;
}

ul::-webkit-scrollbar:horizontal{
    /* 设置水平滚动条厚度 */
    height: 2px;
}

ul::-webkit-scrollbar-thumb { 
    /* 滚动条的其他样式定制，注意，这个一定也要定制，否则就是一个透明的滚动条 */
    border-radius: 8px; 
    border: 2px solid rgba(255,255,255,.4); 
    background-color: rgba(0, 0, 0, .5);
}